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

Maarten 发表于 Dev

马腾

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

“过滤器列表”的模板：

<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。如何item在自定义元素API中获取light DOM的-elements？

德克·格拉彭多夫（Dirk Grappendorf）

您可以<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>