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

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 属性绑定(bind)到过滤器生成器，如下所示:

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>