元素转换

Question

聚合物中有类似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>

我不确定这是否是聚合物的任务,或者这是否是使用聚合物的典型方法.我问,因为我开始喜欢聚合物,我想保持惯用思维.

Answer 1

在Shadow DOM中,这称为分布.要将轻型DOM节点分配到阴影dom中,请使用<content>插入点.

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

它实际上是一种将节点从光dom渲染到阴影dom中的占位符的方法.如果你想使用my-header/my-header-item title/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

我有一个更完整的选项卡演示,请在https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html上进行设置.