javascript - 获取由内容元素选择的 dom-repeat 模板生成的元素

Question

我正在尝试获取由 polymer 上的辅助元素生成的元素，该元素是从内容标签中选择的。这是我尝试做的一个简单示例:

dom模块

<dom-module id="x-foo">
<template>
    <content id="content"></content>
</template>
<script>
    Polymer({
        is: 'x-foo',
	    attached: function()
            var effectiveChildren = this.getEffectiveChildren("span");
            console.log(effectiveChildren);
        }
    });
</script>
</dom-module>

索引.html

<template is="dom-bind">
    <x-foo>
        <template is="dom-repeat" items="{{list}}">
            <span>{{item.name}}</span>
        </template>
    </x-foo>
</template>
<script>
    var scope = document.querySelector("template[is='dom-bind']");
    scope.list = [{"name":"javier"},{"name":"pedro"},{"name":"javier2"}]
</script>

--- 编辑---

我尝试:

getDistributedNodes()
getEffectiveChildren()
getContentChildren()

有什么提示吗？？

Answer 1

所以这里面有一点点，但也有一点点。您要查找的代码是:

this.queryAllEffectiveChildren('span');

但是，根据组件的最终应用程序，当所有 DOM 都可用于实际运行时，会有很多特殊性。我在这里工作:http://plnkr.co/edit/nfER4vTe5y7CddHYO5bk?p=preview主要是我正在等待 dom-repeat 上的 dom-change 事件来检查这些元素。肯定有一些清洁剂可以用于 DOM 刷新或类似的东西，但我不确定用哪种方式来指导你。主要症结在于:

<template>
  There are {{childCount}} children.<br/>
    <content></content>
</template>
<script>
    Polymer({
        is: 'my-element',
        listeners: {
          'dom-change': 'childCheck'
        },
          childCheck: function() {
              this.childCount = this.queryAllEffectiveChildren('span').length;
              console.log(this.queryAllEffectiveChildren('span'));
        }
    });
</script>