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

Question

我想创建一个组件，我可以将其他组件传递给它并创建 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(); returns 空，不知道为什么。

我知道您不能只将元素的 outerHTML 放入页面中，但是可以将一组随机的 HTML/components 传递到这样的模板中吗？

Answer 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);

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

How to pass unknown children of Polymer component into component's DOM

javascript

web-component

polymer

polymer-1.0