Как я могу получить доступ к элементу в родительском шаблоне повтора, находясь в фильтре

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>