polymer-1.0 - 聚合物1.0 : How to stop dom-repeat loop from executing using a dom-if check inside the loop

Question

我正在尝试使用 dom-repeat 内的 dom-if 来完成条件绑定(bind)。这是我的代码:

<template is="dom-repeat" items="{{customers}}">`
     <template is="dom-if" if="_continueLoop(index)" indexAs="index">
          Data renders here
     </template>
</template>

函数_continueLoop(index)看起来像:

_continueLoop: function (value) {
      alert("This function is not being called at all!No alert message.");
      if (value == 1) return true;
      else return false;
}

我的目的是如果index的值为1，即当获取前2条记录时，停止dom-repeat循环继续希望循环停止获取更多内容。

最好的方法是什么？

Answer 1

由于以下原因，我认为这不是最好的答案，但我想我会分享一个解决方案。您可以使用过滤器:

<dom-module id="employee-list">
    <template>
      <template is="dom-repeat" items="{{employees}}" filter="_filter">
        <div># <span>{{index}}</span></div>
      </template>

    </template>

    <script>
      Polymer({
        is: 'employee-list',
        ready: function() {
          this.employees = [{
            name: 'Bob'
          }, {
            name: 'Sally'
          }];
        },
        _filter: function(item) {
          // This is slow. The larger your array, the worse
          // the performance will be 
          return this.employees.indexOf(item) < 1; 
        }
      });
    </script>
  </dom-module>

请注意，这效率不高，因为 binding help pages explains :

Because of the way Polymer tracks arrays internally, the array index isn’t passed to the filter function. Looking up the array index for an item is an O(n) operation. Doing so in a filter function could have significant performance impact.