Question

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

<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;
}

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

这样做的最佳方式是什么？

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>

请注意，这与Mongoose Github Repository：

无效

由于Polymer内部跟踪数组的方式，数组索引不会传递给过滤器函数。查找项的数组索引是O（n）操作。在过滤器功能中执行此操作可能会对性能产生重大影响。

Answer 2

也许你可以在将数据传递给dom-repeat之前制作一个过滤器。在此过滤器中，您将根据需要减少数组元素。
可以帮助你的另一个解决方案是修改这样的条件：

_notPassWhenValueIsGreaterThanOne: function (value) {
    return value <= 1;
}

如果value<=1元素将附加到dom，则其他方式此元素将在内存中，但元素将不可见，dom-repeat将迭代整个数组。

Answer 3

您的想法是正确的，只需在{{}}中执行函数调用：

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

Answer 4

一种可能的解决方案是计算您希望显示的项目子集，并将items标记的<template>属性绑定到该子集。

html可能如下所示：

<template is="dom-repeat" items="{{selectedCustomers}}" as="customer">
    <!-- render customer here-->
</template>

和.js文件中你可能有这个函数：

selectCustomers: function() {
    this.selectedCustomers = [];
    this.push("selectedCustomers", this.customers[0]);
    this.push("selectedCustomers", this.customers[1]);
}

作为旁注，使用this.push()构建数组会向this.selectedCustomers更改的观察者发出警报，并重新呈现dom-repeat。请参阅Dynamic update of dom-repeat templates by changing the underlying array。

显然，您可以使用更多动态代码来确定要显示的项目子集。

Polymer 1.0：如何在循环内使用dom-if检查停止执行dom-repeat循环

4 个答案: