Polymer 允许聚合物元件的消费者提供模板
我正在创建一个显示其他聚合物元素列表的聚合物元素。我希望元素的使用者能够在他们的页面上删除列表元素,并提供在列表项元素中使用的模板。如果他们不提供模板,我想使用默认模板 我试图通过绑定模板的ref属性来实现这一点。如果我提供一个自定义模板,这似乎是可行的,但如果我不提供它,这就不行了 非工作示例: 列表项元素:Polymer 允许聚合物元件的消费者提供模板,polymer,web-component,shadow-dom,Polymer,Web Component,Shadow Dom,我正在创建一个显示其他聚合物元素列表的聚合物元素。我希望元素的使用者能够在他们的页面上删除列表元素,并提供在列表项元素中使用的模板。如果他们不提供模板,我想使用默认模板 我试图通过绑定模板的ref属性来实现这一点。如果我提供一个自定义模板,这似乎是可行的,但如果我不提供它,这就不行了 非工作示例: 列表项元素: <polymer-element name="my-item" attributes="item itemTemplate"> <template>
<polymer-element name="my-item" attributes="item itemTemplate">
<template>
<template bind="{{item}}" ref="{{itemTemplate}}">
</template>
<template id="_itemTemplate">
<li>Default template: {{name}}</li>
</template>
</template>
<script>
Polymer({
itemTemplate: '_itemTemplate',
created: function() {
this.item = {};
}
});
</script>
</polymer-element>
默认模板:{{name}
聚合物({
itemTemplate:“\u itemTemplate”,
已创建:函数(){
this.item={};
}
});
列表元素:
<polymer-element name="my-list" attributes="drag name list itemTemplate">
<template>
<template repeat="{{i in list}}">
<my-item item="{{i}}" itemTemplate="{{itemTemplate}}"></my-item>
</template>
</template>
<script>
Polymer({
ready: function() {
this.list = [{name: 'Item 1', id: 'item1'},
{name: 'Item 2', id: 'item2'},
{name: 'Item 3', id: 'item3'}];
}
});
</script>
</polymer-element>
聚合物({
就绪:函数(){
this.list=[{name:'Item 1',id:'Item 1'},
{name:'Item 2',id:'Item 2'},
{name:'Item 3',id:'Item 3'}];
}
});
明白了
我所要做的就是在使用ref绑定到它的模板之前定义默认模板:
但这似乎仅在同一文件中定义模板时有效。