jquery - Knockout.js:如何根据另一个可观察数组更新属性

Question

我如何根据另一列值的更改来更改一列的值。在下面的代码中，我想使用标记列值更改来更新 % 列。

HTML:

<table data-bind="foreach: users()">
  <thead class="flip-content table-head">
    <tr>

      <th align="center">Name</th>
      <th align="center">Marks</th>
      <th align="center">% out of 100</th>
    </tr>
  </thead>
  <tr >
    <td data-bind="text: $data.name()"> </td>
    <td>
      <input data-bind="value: $data.marks()" />
    </td>
    <td data-bind='text:  $data.percent()'></td>

  </tr>
</table>

脚本:

var UserModel = function () {
  this.users = ko.observableArray([
    {
      id: 1,
      name: ko.observable('Bob'),
      marks: ko.observable(0),
      percent: ko.computed(function () {
        //percentage formula
      }, this)
    },
    {
      id: 2,
      name: ko.observable('Jane'),
      marks: ko.observable(0),
      percent: ko.computed(function () {
        //percentage formula
      }, this)
    }
  ]);
  this.selectedUser = ko.observable(this.users()[0]);
}
var userModel = new UserModel();
ko.applyBindings(userModel);

我怎样才能做到这一点。

Answer 1

最简单和最常见的解决方案是使用“类”实例而不是普通对象。这些允许您轻松选择正确的 marks 值，因为在构造函数内，this 引用当前用户。

var User = function(id, name, marks) {
  this.id = id;
  this.name = name;
  this.marks = ko.observable(marks);
  this.percent = ko.pureComputed(function() {
    return this.marks() + "%";
  }, this);
}

var UserModel = function () {
  this.users = ko.observableArray([
    new User(1, "Bob", 10),
    new User(2, "Alice", 30), 
  ]);
  this.selectedUser = ko.observable(this.users()[0]);
}
var userModel = new UserModel();
ko.applyBindings(userModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table data-bind="foreach: users()">
  <thead class="flip-content table-head">
    <tr>

      <th align="center">Name</th>
      <th align="center">Marks</th>
      <th align="center">% out of 100</th>
    </tr>
  </thead>
  <tr >
    <td data-bind="text: name"> </td>
    <td>
      <input data-bind="value: marks" />
    </td>
    <td data-bind='text: percent'></td>

  </tr>
</table>

如果您确实需要使用普通对象，则可以在父模型上定义百分比逻辑，并传递对 View 中当前项目的引用以创建动态计算。 (我不推荐这个)

var UserModel = function () {
  this.users = ko.observableArray([
    {
      id: 1,
      name: ko.observable('Bob'),
      marks: ko.observable(0)
    },
    {
      id: 2,
      name: ko.observable('Jane'),
      marks: ko.observable(0)
    }
  ]);
  
  this.selectedUser = ko.observable(this.users()[0])
};

UserModel.prototype.percentageFor = function(user) {
  return user.marks() + "%";
};

var userModel = new UserModel();
ko.applyBindings(userModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table data-bind="foreach: users()">
  <thead class="flip-content table-head">
    <tr>

      <th align="center">Name</th>
      <th align="center">Marks</th>
      <th align="center">% out of 100</th>
    </tr>
  </thead>
  <tr >
    <td data-bind="text: name"> </td>
    <td>
      <input data-bind="value: marks" />
    </td>
    <td data-bind='text: $parent.percentageFor($data)'></td>

  </tr>
</table>