我想创建一个组件,我可以将其他组件传递给并创建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 /组件传递到这样的模板中吗?
答案 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);