dom-repeateのポリマー動的要素名

Question

dom-repeatを使用して鉄ページのさまざまな要素を作成するにはどうすればよいですか？

<template is="dom-repeat" items="{{pages}}"> 
    <[[item.name]]></[[item.name]]> 
</template> 

... 

pages: { 
    type: Array, 
    value() { 
    return [ 
     { 
     "name": "element-a", 
     }, 
     { 
     "name": "element-b", 
     }, 
     { 
     "name": "element-c", 
     }, 
}, 

私はポリマー2.0を使用しています。

Answer 1

私のコメントに興味があったので、回答として回答しました。

コード例は今のポリマー1.9になり、私は2.0にスイッチをやるときに私は私の答えを更新しますが、考え方は同じでなければなりませんとにかく

まずあなたがラッパー要素を必要とする、ウィッヒプロパティから別の要素を動的に作成し、それを自身に追加することができます。 私の例では、作成する要素の名前は、XHRのデータベースから来たJSONオブジェクトのデータtypeという名前のプロパティになります。

動的に作成された要素では、バインディングが機能しないため、手作業で行う必要があります。それは_updateState機能のためのもので、ここでは1つのプロパティでのみ更新されますが、アイデアは同じです。

ラッパー：

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../styles/shared-styles.html"> 

<dom-module id="element-wrapper"> 
    <template></template> 
    <script> 
     Polymer({ 
      is: 'element-wrapper', 
      properties: { 
       elementData: { 
        type: Object 
       }, 
       saveFbPath: { 
        type: String 
       }, 
       element: { 
        type: Object 
       }, 
       formSubmitPressed: { 
        type: Boolean, 
        value: false 
       } 
      }, 
      observers: [ 
       '_updateState(elementData.*)' 
      ], 
      attached: function() { 
       console.log("creating element : ", this.elementData); 
       this.async(function() { 
        this.element = this.create(this.elementData.type, { 
         "data": this.elementData 
        }); 
        this.appendChild(this.element); 
       }.bind(this)); 
      }, 
      _updateState: function (elementData) { 
       if (typeof this.element !== "undefined") { 
        this.element.data = elementData.value; 
        console.log('Change captured', elementData); 
       } 
      } 
     }); 
    </script> 
</dom-module> 

this.element = this.create(this.elementData.type, {"data":this.elementData});行要素を作成するものである、最初の引数はdom-module名であり、及び第二JSONオブジェクトWICHは、要素のプロパティにバインドされます。 this.appendChild(this.element);は、このすべてがスムーズに表示

ためthis.async呼び出しである

あなたは、この要素を呼び出しますDOMリピートを必要とするDOMに追加し、それが作成する必要が件のデータにそれを与えるだろうダイナミックなもの。 ここにはelement-listの例がありますが、特定の要素を必要とする必要はありませんが、このロジックはもっと大きなものになる可能性があります。

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../styles/shared-styles.html"> 

<link rel="import" href="element-wrapper"> 
<dom-module id="element-list"> 
    <template> 
     <style is="custom-style" include="shared-styles"></style> 
     <template is="dom-repeat" items="[[ datas ]]" initial-count="10" as="data"> 
      <element-wrapper element-data="[[data]]"></element-wrapper> 
     </template> 
    </template> 
    <script> 
     Polymer({ 
      is: 'element-list', 
      properties: { 
       datas: { 
        type: Array, 
        value: function() { 
         return []; 
        } 
       } 
      } 
     }); 
    </script> 
</dom-module> 

これはトリック:)