dom-repeatの中にネスティング要素と動的コンテンツ - ポリマー1.0

Question

<parent>要素、<tabs>要素があり、任意の数のタブ（UIのロジックを隠す/表示するための要素）と、それぞれの内部に<child>要素<tab>。今私は、次の作業があります。

<!-- inside parent.html: --> 
<tabs></tabs> 

<!-- inside tabs.html: --> 
<template is="dom-repeat" items="{{tabs}}" as="tab" index-as="item_no"> 
    <section> 
     <child id="element-{{tab.index}}"></child> 
    </section> 
</template> 

のみ<parent>は（<tabs>は、単にその上<parent>と繰り返し処理からの配列を受け取り

がある必要があるどのように多くのインスタンス<child>の知っているがする方法があります<tabs>のローカルDOM内側ないハードコード<child>？<content>を使用しての思考と光DOMそれでも開始する全く分からない。取るべき有望なルートでしょうか？

望ましい状態：

<!-- inside parent.html: --> 
<tabs> 
    // somehow specify base content to be rendered in each tab 
</tabs> 

<!-- inside tabs.html: --> 
<template is="dom-repeat" items="{{tabs}}" as="tab" index-as="item_no"> 
    <section> 
     // somehow inject stuff from parent element, perhaps via <content>? 
    </section> 
</template> 

Answer 1

は、これはあなたの質問の私の解釈であるので、私はそれはあなたとOKになる場合は本当にわかりません。私があなたを誤解した場合は、コメントを削除してください。私は喜んで答えを更新します。

私は単純な要素の構成を思いついたので、dom-repeatや手動テンプレートスタンピングは必要ありません。このソリューションは、2つのカスタム要素、つまりmy-parentとmy-childで構成されています。

両方のカスタム要素の定義は、以下の通りである。

<dom-module id="my-parent"> 
    <template> 
    <tabs> 
     <content></content> 
    </tabs> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-parent', 
    }); 
    </script> 
</dom-module> 

<dom-module id="my-child"> 
    <template> 
    <section> 
     <content></content> 
    </section> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-child', 
    }); 
    </script> 
</dom-module> 

そして、それらの提案使用方法は以下の通りです：

<my-parent> 
    <my-child>First tab</my-child> 
    <my-child>Second tab</my-child> 
    <my-child>Third tab</my-child> 
</my-parent> 

オンラインデモ：http://jsbin.com/hibuzafapu/1/edit?html,output

は、結果のHTML計算コードは次のようになります。

<my-parent> 
    <tabs> 
    <my-child> 
     <section> 
     First tab 
     </section> 
    </my-child> 
    <my-child> 
     <section> 
     Second tab 
     </section> 
    </my-child> 
    <my-child> 
     <section> 
     Third tab 
     </section> 
    </my-child> 
    </tabs> 
</my-parent> 

正しく理解していただければ、タグは<section>タグをラップしているだけです。現在のところ、前述のタグは何もせず、すべてをラップするブロックレベルの要素です（ちょうどdivのように）。これが気になる場合は、実際に<section>タグを省略して、すべてのスタイルを直接<my-child>タグに入れてください。 （タブを追加/削除）の溶液に、いくつかのダイナミクスを追加するために

<my-parent> 
    <tabs> 
    <my-child> 
     First tab 
    </my-child> 
    <my-child> 
     Second tab 
    </my-child> 
    <my-child> 
     Third tab 
    </my-child> 
    </tabs> 
</my-parent> 

---

UPDATE

：

この場合、結果として計算されたHTMLは次のようになります2つのオプションがあります：dom-repeatを使用して、軽いDOMでアイテムにスタンプを付けたり、アイテム配列をmy-parent要素に押し込んで、dom-repeatを使用します。どちらのオプションも実装に非常によく似ており、動作方法に大きな違いはありません。

オプション：光DOMに刻印：両方のカスタム要素のための

の定義は、唯一の違いは、あなたがそれらを使用する方法である、変わりません。ライトDOMをハードコーディングする代わりに、よりダイナミックにします。

<dom-module is="tmp-element"> 
    <template> 
    <my-parent> 
     <template is="dom-repeat" items="[[myItems]]"> 
     <my-child>[[item.content]]</my-child> 
     </template> 
    </my-parent> 
    </template> 
    <script> 
    Polymer({ 
     is: 'tmp-element', 
     ready: function() { 
     this.myItems = [ 
      { content: "First tab" }, 
      { content: "Second tab" }, 
      { content: "Third tab" }, 
     ], 
     }; 
    }); 
    </script> 
</dom-module> 

<tmp-element></tmp-element> 

tmp-elementは、結合範囲を作成し、dom-repeatにデータを供給するために純粋に使用されます。

ライブデモ：http://jsbin.com/gafisuwege/1/edit?html,console,outputenter link description here

オプションB：親の内側に刻印：このオプションで

、親は私達が項目の配列を供給することになるであろうに、追加のプロパティを持っている必要があります。

<dom-module id="my-parent"> 
    <template> 
    <tabs> 
     <template is="dom-repeat" items="[[items]]"> 
     <my-child>[[item.content]]</my-child> 
     </template> 
    </tabs> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-parent', 
     properties: { 
     items: Array, 
     }, 
    }); 
    </script> 
</dom-module> 

と使用方法は次のとおりです：

my-parent要素の新しいバージョンは以下の通りです

<dom-module is="tmp-element"> 
    <template> 
    <my-parent items="[[myItems]]"></my-parent> 
    </template> 
    <script> 
    Polymer({ 
     is: 'tmp-element', 
     ready: function() { 
     this.myItems = [ 
      { content: "First tab" }, 
      { content: "Second tab" }, 
      { content: "Third tab" }, 
     ]; 
     }, 
    }); 
    </script> 
</dom-module> 

<tmp-element></tmp-element> 

ここで、私はまたにtmp-element（前とは異なるもの）を使用していましたその 'データ'をmy-parentに送ってください。

ライブデモ：http://jsbin.com/kiwidaqeki/1/edit?html,console,output