1
我正在创建显示其他聚合物元素列表的聚合物元素。我希望元素的使用者能够将列表元素放在其页面上,并提供要在列表项元素中使用的模板。如果他们不提供模板,我想使用默认模板。允许聚合物元素的消费者提供模板
我试图通过绑定到模板的ref属性来实现此目的。这似乎工作,如果我提供自定义模板,但如果我不提供它。
非工作示例:http://jsbin.com/futiti/7/edit?html,output
列表项元素:
<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>
列表元素:
<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>
除了这似乎当模板在同一文件中被定义为只工作。 – jupe 2014-09-30 23:56:58