Question

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

＆＃39; filter-list＆＃39;的模板：

<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元素？

Answer 1

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

以下是您的方案的一个小型完整示例：

<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>

可以在输入字段中输入过滤字符串。过滤器最初为空，因此页面加载后不会显示任何项目。

Polymer：如何访问'content'标签内的元素

1 个答案: