Question

我正在尝试通过聚合物上的辅助元素生成元素，聚合物是从内容标记中选择的。这是我试图做的一个简单例子：

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>

的index.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-change等dom-repeat事件来检查这些元素。肯定有更清洁的东西可以在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>

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

1 个答案: