聚合物:如何访问“内容”标签中的元素

Question

我创建了一个自定义元素，一个带有内置过滤器的列表：

“过滤器-列表”模板：

<template>
  <content select="item"></content>
</template>

..。

<filter-list filter='AAA'>
  <item class="AAA">1</item>
  <item class="AAA">2</item>
  <item class="BBB">3</item>
  <item class="BBB">4</item>
  <item class="CCC">5</item>
  <item class="CCC">6</item>
</filter-list>

其思想是，列表将显示/隐藏与过滤器中的类匹配的项。为此，我编写了以下回调：

    Polymer('filter-list', {
        filter: '',
        ready: function() {
        },

        filterChanged: function() {
            if(this.filter) {
                items = this.$.items.querySelectorAll("."+this.filter);
                console.log("Showing "+items.length+" items.");
            }
        },
    });

但我无法接通项目节点。items.length总是0。如何在自定义元素API中访问轻量DOM的item-elements？

Answer 1

您可以通过<content>函数访问用getDistributedNodes()标记插入的节点。

下面是您的场景的一个完整的小示例：

<polymer-element name="filter-list" attributes="filter">
  <template>
    <content id="items" select="item"></content>
  </template>
  <script>
    Polymer('filter-list', {
      ready: function() {
        this.filter = '';
      },
      filterChanged: function() {
        var items = this.$.items.getDistributedNodes();
        for (var i = 0; i < items.length; ++i) {
          items[i].style.display = items[i].className == this.filter ? 'block' : 'none';
        }
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-app" noscript>
  <template>
    <input value="{{filter}}">
    <filter-list filter="{{filter}}">
      <item class="AAA">1</item>
      <item class="AAA">2</item>
      <item class="BBB">3</item>
      <item class="BBB">4</item>
      <item class="CCC">5</item>
      <item class="CCC">6</item>
    </filter-list>
  </template>
</polymer-element>

<my-app></my-app>

可以在输入字段中输入筛选字符串。过滤器最初是空的，所以在页面加载后不会显示任何项。