Question

我一直在努力制作一个交互式表单，其中一个viewmodel有一个项目集合。我想从该集合中动态添加/删除项目。

我发现很难找到能够达到这个深度的例子，而且大部分都经常采用更直接的实现方式，但是我遇到了This post这几乎解释了我在做什么使用这个辉煌的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);
}

添加到bind，你可以这样做：

<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按钮，该员工调用传递当前员工的父removeEmployee上的CompanyViewModel功能。

这是一个更新的fiddle

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/

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

2 个答案: