如何将Polymer组件的未知子项传递到组件的DOM中

时间:2015-08-03 12:00:16

标签: javascript polymer web-component polymer-1.0

我想创建一个组件,我可以将其他组件传递给并创建DOM结构。

<test-component>
    <img/>
    <div/>
    <foo/>
</test-component>

努力实现这一目标:

<dom-module name="test-component">
    <template>
        <h1>Title</h1>
        <ul>
            <template is="dom-repeat" items="{{nodes}}">
                <li>element:</li>
                <li>{{item}}</li>
            </template>
        </ul>

        <content id="contentelement"></content>
    </template>
</dom-module>

<script type="text/javascript">
    Polymer({
        is: "test-component",
        ready: function() {
            this.nodes = (function(that) {
                var nodeList = that.$.contentelement._distributedNodes,
                    nodeMap = [];
                for(var i = 0; i < nodeList.length; i++) {
                    if(nodeList[i].nodeType === 1) {
                        nodeMap.push(nodeList[i].outerHTML);
                    }
                }
                return nodeMap
            }(this));
        }
    });
</script>

我使用了一个函数来构建this.nodes因为     this.nodes = this。$。contentelement.getDistributedNodes(); 返回null,不确定原因。

我知道你不能只将一个元素的outerHTML放到页面中,但可以将一组随机的HTML /组件传递到这样的模板中吗?

1 个答案:

答案 0 :(得分:1)

不幸的是,目前无法通过数据绑定实现这一目标(请查看此discussion on Github)。

这是JavaScript中可能的解决方法。

<dom-module name="test-component">
    <template>
        <h1>Title</h1>
        <ul>
            <template is="dom-repeat" items="{{nodes}}">
                <li>element:</li>
                <li class="content"></li>
            </template>
        </ul>
        <content id="contentelement"></content>
    </template>
</dom-module>

<script type="text/javascript">
    Polymer({
        is: "test-component",
        ready: function() {
            this.nodes = this.getContentChildren();
            this.async(function(){
                var contentNodes = Polymer.dom(this.root).querySelectorAll(".content");
                this.nodes.forEach(function(element, index) {
                    contentNodes[index].innerHTML = element.outerHTML;
                });
            }.bind(this));
        }
    });
</script>

修改

您可以通过从DOM中删除内容节点来删除原始位置的内容节点。

this.nodes = this.getContentChildren();
Polymer.dom(this.root).removeChild(this.$.contentelement);