knockoutjs 打破数组中的循环

Question

我正在尝试复制与此页面上显示的当前代码类似的代码： http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

数组循环计算总价，但是，一旦满足特定条件，我就会尝试打破循环。

viewModel.total = ko.computed(function() {
    var total = 0;
    ko.utils.arrayForEach(this.items(), function(item) {
        var value = parseFloat(item.priceWithTax());
        if (!isNaN(value)) {
            total += value;
        }
    });
    return total.toFixed(2);
}, viewModel);

我想要实现的是，例如，如果 value 等于 2，则循环将停止，total.toFixed(2) 将等于 0。

我知道这可能是一个简单的问题，但我一直在到处寻找类似的问题，并且一直在努力寻找我正在寻找的东西。

我尝试创建与下面非常相似的东西，但这不起作用。

viewModel.total = ko.computed(function() {
    var total = 0;
    ko.utils.arrayForEach(this.items(), function(item) {
        var value = parseFloat(item.priceWithTax());
        if (!isNaN(value)) {
            total += value;
        }
    });
    if (value == 2) {
        return total.toFixed(2) = 0;
}
    return total.toFixed(2);
}, viewModel);

Answer 1

这样的？

var viewModel = function() {
  var self = this;
  self.items = ko.observableArray([{
    name: 'Item 1',
    priceWithTax: ko.observable(1.20)
  }, {
    name: 'Item 2',
    priceWithTax: ko.observable(1.20)
  }, {
    name: 'Item 3',
    priceWithTax: ko.observable(0.20)
  }, {
    name: 'Item 4',
    priceWithTax: ko.observable(0.20)
  }]);

  self.total = ko.computed(function() {
    var total = 0;

    ko.utils.arrayForEach(this.items(), function(item) {
      var value = parseFloat(item.priceWithTax());
      if (!isNaN(value)) {
        total += value;
      }
    });
    
    if (total >= 2) {
      var returnValue = 0;
      return returnValue.toFixed(2);
    }
    return total.toFixed(2);

  });
}

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <tbody data-bind="foreach: items">
    <tr>
      <td data-bind="text:name"></td>
      <td data-bind="text: priceWithTax"></td>
    </tr>
  </tbody>
  <tfooter>
    <tr>
      <th>Total</th>
      <th data-bind="text: total"></th>
    </tr>
  </tfooter>
</table>