嵌套元素和DOM重複內部動態內容 - 聚合物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>知道需要有多麼的<child>許多情況下是（<tabs>僅從<parent>接收一個數組和遍歷它

有沒有一種辦法不硬編碼<child>的<tabs>當地DOM裏面？使用<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

這是我對你的問題的解釋，所以我真的不知道這是否是你確定。如果我誤解了你，請發表評論，我很樂意更新我的答案。

我想出了一個簡單的元素組成，不需要dom-repeat或手動模板衝壓。該解決方案由兩個自定義元素組成，即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>標籤的<my-child>標籤是多餘的。目前前面提到的標籤什麼都不做，只是一個包裝所有東西的塊級元素（就像div）。如果這讓你感到困擾，那麼你實際上可以省略<section>標籤，並將所有樣式直接放在<my-child>標籤上。

在這種情況下，所產生的計算的HTML看起來像這樣：

<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

爲了一些動力學添加到該溶液中（添加/刪除標籤） ，您有兩種選擇：使用dom-repeat並在光DOM中標記項目，或將項目數組推入my-parent元素，並在那裏使用dom-repeat。這兩個選項都與實現非常相似，並且在工作方式上沒有太大差異。

選項A：光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：內父衝壓：

在這個選項中，家長需要有一個附加屬性，其中將我們將提供項目的數組。

的my-parent元素的新版本是這樣的：

<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> 

而且用法是：

<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