元素轉換

有沒有像angularjs指令的transclude屬性在聚合物中？什麼讓我可以將某些元素包含到模板中的特定位置？元素轉換

我想實現類似如下：

<my-header title="My title"> 
    <my-header-item name="Item 1"></my-header-item> 
    <my-header-item name="Item 2"></my-header-item> 
</my-header>

這可能表示：

<h1>My title</h1> <!-- "My title" given by my-header's title attribute --> 
<ul> 
    <li>Item 1 <!-- given by my-header-item --> 
    <li>Item 2 
</ul>

我不知道這是否是對聚合物任務，或如果這是一個典型的方式使用聚合物。我在問，因爲我開始喜歡聚合物，我想保持習慣思維。

來源

2014-05-08 Martin Drlík

在Shadow DOM land中，這稱爲分佈。要將淺色DOM節點分佈到陰影中，請使用<content>插入點。

http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

這是毫不誇張地渲染來自光DOM節點進入影子DOM佔位符的方式。如果你想要做棘手的事情我的頭/我的頭項標題/ name屬性，你可以做這樣的事情：

<polymer-element name="my-header"> 
    <template> 
    <ul> 
     <template repeat="{{item in items}}"> 
     <li>{{item.name}}</li> 
     </template> 
    </ul> 
    <content id="c" select="my-header-item"></content> 
    </template> 
    <script> 
    Polymer('my-header', { 
    domReady: function() { 
     this.items = [].slice.call(this.$.c.getDistributedNodes()); 
    } 
    }); 
    </script> 
</polymer-element>

演示：http://jsbin.com/hupuwoma/1/edit

我有一個更全面-fledged選項卡演示在https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html上執行此設置。

來源

2014-05-08 19:51:57 ebidel