Question

我正在使用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混合，但是我似乎无能为力。

任何帮助将不胜感激。谢谢！

Answer 1

由于上述原因，这里有一个示例，说明如何动态创建聚合物元素并定义值。

Demo

 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>

聚合物：通过绑定附加动态组件标签

1 个答案: