javascript - knockout 计算不会自动更新

Question

调试控制台输出显示选项更改确实更改了 knockout 数据，更改的结果可以通过按下 html 页面最后一行上的按钮强制计算运行来查看，但由于某种原因 ko.computed显示在 html 倒数第二行的内容不会像我预期的那样自动更新。

如有任何帮助，我们将不胜感激!

代码

JSFiddle Reference

function CustomBindingViewModel() {
  var self = this;
  self.range = [1, 2, 3, 4, 5];
  self.opts = [
    "Functionality, compatibility, pricing - all that boring stuff",
    "How often it is mentioned on Hacker News",
    "Number of gradients/dropshadows on project homepage",
    "Totally believable testimonials on project homepage"
  ];

  self.optionRange = 5;
  self.options = ko.observableArray();
  self.opts.forEach(function(option) {
    self.options.push({
      option: option,
      importance: 2
    });
  });

  self.points = function() {
    var sum = 0;
    var sumStr = "";
    self.options().forEach(function(option) {
      sum += option.importance;
      sumStr += option.importance;
    });
    console.log(sumStr);
    return 10 - sum;
  };
}

ko.applyBindings(new CustomBindingViewModel());

.points {
  font-weight: bold;
}
.select {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<h1>Knockout Custom Bindings</h1>
<h2>Which factors affect your technology choices?</h2>

<p>Please distribute <span class="points">10</span> points between the following options.</p>

<table>
  <thead>
    <tr>
      <td>Option</td>
      <td>Importance</td>
    </tr>
  </thead>
  <tbody data-bind="foreach:options">
    <tr>
      <td data-bind="text:option"></td>
      <td class="select">
        <select data-bind="options:$root.range, value:importance"></select>
      </td>
    </tr>
  </tbody>
</table>

<p>You've got <span class="points" data-bind="text:points()"></span> points left to use.</p>
<button data-bind="click:$root.points()">Finished</button>

Answer 1

虽然数组是可观察数组，但数组中的值是不可观察的。

使数组中项目的 importance 属性也可观察，因为这是您想要观察的。

//...other code removed for brevity

self.options = ko.observableArray();
self.opts.forEach(function(option) {
  self.options.push({option:option, importance:ko.observable(2)}); //<-- NOTE THIS HERE
});

//...other code removed for brevity

以便在 importance 值更改时触发事件。

然后您需要更新点数的计算方式。

//...other code removed for brevity

self.points = function() {
  var sum = 0;
  var sumStr = "";
  self.options().forEach(function (option) {
    sum += option.importance(); //<-- NOTE THE BRACES
    sumStr += option.importance(); //<-- NOTE THE BRACES
  });
  console.log(sumStr);
  return 10 - sum;
};

//...other code removed for brevity

这是完成的 js fiddle