[英]How to dom-repeat slot content
我正在尝试创建一个可重用列表,将其行模板作为插槽传入,但插槽内容仅重复一次。 这里的例子: https : //codepen.io/chris-gunawardena/project/editor/XkPYQw
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
<dom-module id="list-repeater">
<template>
<template is="dom-repeat" items="{{items}}" as="item">
<li>
# [[index]]: [[item]] <slot name="row-template"></slot>
</li>
</template>
</template>
<script>
class ListRepeater extends Polymer.Element {
static get is() {
return 'list-repeater';
}
static get properties() {
return {
items: Array,
};
}
}
customElements.define(ListRepeater.is, ListRepeater);
</script>
</dom-module>
这会像这样使用:
<list-repeater items='["a","b"]'>
<div slot="row-template">--slot content--</div>
</list-repeater>
该功能类似于 Iron-list,它接受一个模板,但很难遵循 Iron-list 正在做的事情。
在您的情况下使用插槽不起作用,铁列表正在使用Templatizer Behavior来实现此目的
Polymer.Templatizer行为添加了生成模板实例的方法,每个模板实例都由匿名Polymer.PropertyEffects实例管理,其中标记模板内容中的数据绑定绑定到自身的访问器。
我也遇到了同样的问题,我得到了一个解决方案,你可以试试这个,让我知道这是否适合你。 这种方法使用了模板器。
HTML:
<div id="you-component-list"><your-component></you-component><div>
JS:
在附加的方法中添加这一行:
attached() {
this.templatize(/** @type {!HTMLTemplateElement} **/ (
this.$.'your-component-list'.querySelector('template')));},
const /** !Array */ flattenedNodes = Polymer.FlattenedNodesObserver.getFlattenedNodes(this); const distributedNodeToAppend = /** !Node */ flattenedNodes.find( (/** !Node */ node) => (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('slot'))); const clone = this.stamp({item: item}); if (distributedNodeToAppend) { const childNode = distributedNodeToAppend.cloneNode(true); childNode.removeAttribute('slot'); clone.root.querySelector('Your-component').appendChild(childNode); } Polymer.dom(this.$.'you-component-list').appendChild(clone.root);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.