2014-09-30 73 views
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> 

回答