我正在使用Polymer 2.0，我想动态地将一个组件元素插入到具有正确绑定集的DOM中。
<child-component collection="[[ parentCollection ]]"></child-component>
在这个例子中，child-component组件有一个名为collection的属性，这个collection属性应该绑定到父组件的parentCollection属性（它只是一个数组数组）。
const node = document.createElement('child-component');
node.setAttribute('collection', '[[ parentCollection ]]');
this.$.container.appendChild(node);
以上似乎不起作用。将其设置为innerHTML（例如'<child-component collection="[[ parentCollection ]]"></child-component>'）也不起作用。
样本父组件
class ParentComponent extends Polymer.Element {
static get is() { return 'parent-component'; }
static get properties() {
return {
parentCollection: {
type: Array,
value: [1,2,3,4,5],
}
};
}
}
customElement.define(ParentComponent.is, ParentComponent);
示例子组件
class ChildComponent extends Polymer.Element {
static get is() { return 'child-component'; }
static get properties() {
return {
collection: {
type: Array,
value: [],
}
};
}
connectedCallback() {
super.connectedCallback();
// The desired log would be [1,2,3,4,5]
console.log(this.collection);
}
}
customElement.define(ChildComponent.is, ChildComponent);
示例Dom模块
<dom-module id="parent-component">
<template>
<style></style>
<div id="container></div>
</template>
<script src="parent-component.js"></script>
</dom-module>
我已经尝试过调查Polymer.Bind和Polymer.PropertyEffects mixin，但我似乎无法随心所欲。
任何帮助将非常感激。谢谢！
这里有一个例子，因为您希望在上面如何创建动态聚合物元素并定义一个值：
HTMLImports.whenReady(function() {
class ParentComponent extends Polymer.Element {
static get is() { return 'parent-component'; }
static get properties() { return {
parentCollection: {
type: Array,
value() { return [1,2,3,4,5]; }
}
}}
ready(){
super.ready();
let nod = document.createElement('child-component')
nod.collection = this.parentCollection;
this.shadowRoot.querySelector('#container').appendChild(nod);
}
}
customElements.define(ParentComponent.is, ParentComponent);
class ChildComponent extends Polymer.Element {
static get is() { return 'child-component'; }
static get properties() { return {
collection: {
type: Array,
value() {return [];}
}
}
}
connectedCallback(){
super.connectedCallback();
console.log('this collection from child: ', this.collection)
}
}
customElements.define(ChildComponent.is, ChildComponent);
});<html>
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<parent-component></parent-component>
<dom-module id="parent-component">
<template>
<style>
:host {
display: block;
height: 100%;
}
</style>
<div id="container"></div>
</template>
</dom-module>
</body>
</html>