Question

<iron-pages>
    <template is="dom-repeat" items="{{fruit_categories}}" as="category">
        <div>
            <template is="dom-repeat" items="{{all_fruits}}" as="fruit"
                      filter="isThisFruitInTheRightCategory">
                <!-- Some more stuff -->
                <span>{{fruit.weight}}</span>
                <span>{{fruit.age}}</span>
                <!-- ... -->
            </template>
        </div>
    </template>
</iron-pages>

isThisFruitInTheRightCategory: function(fruit){
    return fruit.category === /* Q: How do I get the current category? */
}

假设我有一个包含所有类别名称的数组，另一个数组包含我在一个拥有自己属性的篮子中的所有水果。我想将它们显示在相应类别的相应页面中。

我尝试使用过滤器来过滤掉不属于当前类别的水果，但我似乎无法找到访问父类的方法（{{category}}）。

如何实现这一目标？

Answer 1

一种解决方案是将filter属性绑定到过滤器生成器，如下所示：

filter="{{filterForCategory(category)}}"

然后

        filterForCategory: function(category) {
          return function(fruit) {
            return fruit.category === category;
          }
        }

这里有完整的例子：

<dom-module id="x-example">
  <template>

    <template is="dom-repeat" items="{{fruit_categories}}" as="category">
      <h2>{{category}}</h2>
      <div>

         <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="{{filterForCategory(category)}}">
          <span>{{fruit.name}}</span><br>
        </template>

      </div>
    </template>

  </template>
  <script>

      Polymer({
        is: "x-example",
        properties: {
          fruit_categories: {
            value: ['apples', 'oranges']
          },
          all_fruits: {
            value: [
              {name: 'fuji', category: 'apples'},
              {name: 'granny smith', category: 'apples'},
              {name: 'navel', category: 'oranges'}
            ]
          }
        },
        filterForCategory: function(category) {
          return function(fruit) {
            return fruit.category === category;
          }
        }
      });

    });
  </script>
</dom-module>

如何在过滤器中访问父重复模板中的项目

1 个答案: