Question

请考虑以下代码：

<div class="expandedCoverages" data-bind="foreach: $root.getGroupCoveragesPerPackage(packageCost)">
  <div class="calculateCostCoverage" 
         data-bind="html: CoverageGroupDescription()"></div>
  </div>
</div>

如果packageCost observable发生更改，CoverageGroupDescription（）不会更改，因为函数不会再次触发。

是否有可能以某种方式再次触发该函数以更改foreach绑定？

Answer 1

这就是Knockout在视图（HTML）中直接执行的函数/语句所做的事情：

如果代码不依赖于可观察的，则只会评估一次。
如果代码依赖于可观察的，它将创建一个计算的observable，每次可观察的更改时都会重新计算。

虽然在JS模型中使用计算属性，就像Sam C.的评论所暗示的那样，更清晰，但并非绝对必要。这样做的：

<div data-bind="foreach: myFunction(observableParam())"></div>

实际上和做的一样：

<div data-bind="foreach: myComputed"></div>

使用：

this.myComputed = ko.computed(function() { return myFunction(observableParam()); });

这意味着在这种情况下，coverageGroupDescription可能不会返回正确更新的数组。请参阅下面的问题中具有或多或少类似实现的工作示例。更改packageCost，描述也会自动更改。

var Coverage = function(cost) {
  this.cost = ko.observable(cost);
  this.coverageGroupDescription = function() {
    return 'This package costs ' + this.cost() + '$';
  }.bind(this);
}

var app = {
  items: ko.observableArray([
    new Coverage(15),
    new Coverage(20),
    new Coverage(25),
    new Coverage(30),
    new Coverage(35),
  ]),
  packageCost: ko.observable(1),
  getGroupCoveragesPerPackage: function(m) {
    var m = m();
    return ko.utils.arrayMap(this.items(), function(item, i) {
      return new Coverage(item.cost()*m);
    });
  }
};

ko.applyBindings(app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Multiply all by: <input type="text" data-bind="value: packageCost">
<ul data-bind="foreach: getGroupCoveragesPerPackage(packageCost)">
  <li data-bind="text: coverageGroupDescription()"></li>
</ul>

淘汰foreach绑定功能

1 个答案: