Question

对于下面的代码，如果满足if条件，则需要中断循环。

我阅读了this文档，但没有找到解决方法。

<li>
    <!-- ko foreach: $parents[2].productData -->
       <!-- ko if: repositoryId == $parent.productId -->
           <a data-bind="ccLink: {route: '/'+$parent.productId}"><img data-bind="attr:{src: mediumImageURLs[0]}" /></a>
        <!-- /ko -->
       <!-- /ko  -->
 </li>

Answer 1

如注释中所述，您不能破坏ko foreach，但是可以基于传递给if绑定的条件来绕过每次迭代。只需通过循环条件即可打破if绑定。

下面是一个如果值大于3则破坏foreach的示例。

// Here's my data model
var ViewModel = function() {
    this.contents = ko.observableArray([1,2,3,4,5]);
};
 
ko.applyBindings(new ViewModel()); // This makes Knockout get to work

p{
  background: gray;
  padding:10px;
  margin:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class='liveExample'>   
    <div data-bind="foreach: contents">
    <!--ko if: $data < 4 -->
      <p data-bind="text:$data"></p>
      <!-- /ko -->
    </div>
</div>

编辑：

正如@Ray在评论中指出的那样，这似乎可行，但是如果数组很大，可能会导致性能问题。从技术上讲，foreach对数组中的每个元素进行迭代，只有HTML不呈现。

Answer 2

为避免性能问题，请使用切片

<div data-bind="foreach: contents.slice(0, 20)">

淘汰赛foreach循环

2 个答案: