淘汰赛计算不会自动更新答案

【问题标题】：Knockout computed does not auto update淘汰赛计算不会自动更新
【发布时间】：2017-05-17 04:06:00
【问题描述】：

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

任何帮助将不胜感激！

代码

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>

【问题讨论】：

我更新了代码以强制计算在按下按钮时进行计算，这有效，但计算仍然不计算。最新代码在jsfiddle.net/carltonj2000/e4ehL3ne/3。
如果我遗漏了什么但我没有看到任何计算函数，请接受我的歉意

标签： javascript knockout.js

【解决方案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

【讨论】：