Question

我有一个对象数组，我正在展示它们的属性。如何为它们添加单独的编辑功能？让我们说它是列表中每个元素的编辑按钮。

当对象处于编辑模式时，我想显示输入字段而不是文本字段，为此我使用可见绑定。所以我需要为每个人提供一个布尔观察值。

如何在不知道列表中的元素数量的情况下执行此操作...我还添加和删除，因此每次创建新元素时，我都需要向此数组添加更多的observable。

我也试图给我的对象提供一个ko.observable元素，但我不能这样做。

Answer 1

我喜欢在observableArray中使用一个对象。以下是根据需要为多行添加内联编辑功能的示例。

＆＃13;

function Employee(emp) {
  var self = this;
  self.Name = ko.observable(emp.Name);
  self.Age = ko.observable(emp.Age);
  self.Salary = ko.observable(emp.Salary);
  self.EditMode = ko.observable(emp.EditMode);
  self.ChangeMode = function() {
    self.EditMode(!self.EditMode());
  }
}

function viewModel() {
  var self = this;
  self.Employees = ko.observableArray()
  self.Employees.push(new Employee({
    Name: "Joe",
    Age: 20,
    Salary: 100,
    EditMode: false
  }));

  self.Employees.push(new Employee({
    Name: "Steve",
    Age: 22,
    Salary: 121,
    EditMode: false
  }));

  self.Employees.push(new Employee({
    Name: "Tom",
    Age: 24,
    Salary: 110,
    EditMode: false
  }));
}
var VM = new viewModel();
ko.applyBindings(VM);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table border=1>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Salary</th>
      <th></th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Employees">
    <tr data-bind="if: !EditMode()">
      <td data-bind="text: Name"></td>
      <td data-bind="text: Age"></td>
      <td data-bind="text: Salary"></td>
      <td><button data-bind="click: ChangeMode">Edit</button></td>
    </tr>
    <tr data-bind="if: EditMode()">
      <td>
        <input data-bind="value: Name">
      </td>
      <td>
        <input data-bind="value: Age">
      </td>
      <td>
        <input data-bind="value: Salary">
      </td>
      <td><button data-bind="click:ChangeMode">Save</button></td>
    </tr>
  </tbody>
</table>

＆＃13;

如何创建一个knockout.js可观察数组？

1 个答案: