使用Knockoutjs在客户端添加和删除项目

Question

我一直在努力制作一个交互式表单，其中视图模型包含一组项目。 我想从该集合动态添加/删除项目。

我发现很难找到达到这种深度的示例，并且大多数示例通常都停留在更直接的实现上，但是我遇到过这篇文章 ，在很大程度上解释了我对这个出色的jsfiddle所做的工作 ，使用敲除映射插件将json拉出然后映射。

var company;

function PersonViewModel(data) {
  var personMapping = {
    'ignore': ['twitter', 'webpage'],
    'copy': ['age'],
    'lastName': {
      'create': function (options) {
        return ko.observable(options.data.toUpperCase());
      }
    }
  };

  ko.mapping.fromJS(data, personMapping, this);

  this.fullName = ko.computed(function () {
    return this.firstName() + ' ' + this.lastName();
  }, this);
}

function CompanyViewModel(data) {
  var companyMapping = {
    'ignore': ['address', 'website'],
    'name': {
      'create': function (options) {
        return ko.observable(options.data.toUpperCase());
      }
    },
    'employees': {
      key: function (data) {
        return ko.utils.unwrapObservable(data.personId);
      },
      create: function (options) {
        return new PersonViewModel(options.data);
      }
    }
  };

  ko.mapping.fromJS(data, companyMapping, this);
}

我不知道如何实现， 以及如何以及在何处确切添加“ addEmployee”和“ removeEmployee”功能 ？ 以及如何将它们绑定到按钮？

先感谢您！

Answer 1

将这些添加到您的CompanyViewModel是合乎逻辑的。 例如，如下所示：

function CompanyViewModel(data) {
  var self = this;
  var companyMapping = {
     // ...as before
  };

  self.addEmployee = function () {
    // as an example, we are just adding a static new employee
    self.employees.push(new PersonViewModel({
      lastName: "new",
      firstName: "employee",
      age: 10
    }));
  }

  // important, with how we are binding the function, we expect the 
  // argument, e, to be the employee to remove
  self.removeEmployee = function (e) {
    self.employees.remove(e);
  }

  ko.mapping.fromJS(data, companyMapping, this);
}

添加绑定，您可以执行以下操作：

<div id="company">
  <h1 data-bind="text: name"></h1>
  <h2>Employees</h2>
  <input type="button" value="add" data-bind="click: addEmployee" />
  <table>
    <thead>
      <tr>
        <th>Full name</th>
        <th>Last name</th>
        <th>First name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: employees">
      <tr>
        <td data-bind="text: fullName"></td>
        <td data-bind="text: lastName"></td>
        <td data-bind="text: firstName"></td>
        <td data-bind="text: age"></td>
        <td>
          <input type="button" value="x" data-bind="click: $parent.removeEmployee" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

这将为每个员工添加一个add按钮以及一个x删除按钮，从而在传入当前员工的父CompanyViewModel上调用removeEmployee函数。

这是更新的小提琴

Answer 2

您可以将这些功能添加到CompanyViewModel 。

CompanyViewModel

...
this.addEmployee = function () {
    this.employees.push(new PersonViewModel({
        firstName: 'New',
        lastName: 'Employee',
        age: 777,
    }));
};
this.removeEmployee = function () {
    this.employees.pop();
};

的HTML

....
<div data-bind="click: addEmployee">Add Employee</div>
<div data-bind="click: removeEmployee">Remove Employee</div>
...

http://jsfiddle.net/HBKYP/198/