knockoutjs 打破数组中的循环

Posted 2023-03-27

【中文标题】knockoutjs 打破数组中的循环

【英文标题】：knockoutjs breaking a loop in array

【发布时间】：2020-11-09 10:29:08

【问题描述】：

我正在尝试复制与此页面上显示的当前代码类似的代码： 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);

【问题讨论】：

非常感谢任何帮助

【参考方案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>

【讨论】：

这个问题是它循环遍历每个产品的arrayForEach，所以一旦一个新产品通过数组，它会更新由于total += value;的值实际如果应该如果(value >= 2)，不是产品

如果产品数量少，那么它的性能差异会很小，尽管我同意它并不理想。这可能会有所帮助***.com/questions/2641347/…