Polymer 中是否有类似 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>
我不确定这是 polymer 的任务,还是 polymer 的典型使用方式。我在问,因为我开始喜欢 polymer ,我想保持惯用思维。
最佳答案
在 Shadow DOM 领域,这称为分发。要将 light DOM 节点分布到 shadow dom 中,您可以使用 <content>
插入点。
http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees
从字面上看,这是一种将节点从 light dom 渲染到 shadow 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 上完成此设置。 .
关于angularjs - 元素包含,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23549334/