폴리머 다트에 외부 참조 템플릿을 삽입하는 올바른 방법은 무엇입니까?

Question

이 대답 https://stackoverflow.com/a/26891895/2117440에서 참조 된 템플릿을 바인딩하는 것이 가능하다는 것을 알고 있습니다. 그러나 나는이 수행 할 때

<polymer-element name="data-ul" extends="ul" attributes="items"> 
    <!-- this is the replacement of content tag --> 
    <template repeat="{{item in items}}"> 
    <template bind="{{item}}" ref="itemTemplate"></template> 
    <input type="button" value="Add Item" on-click="{{addItem}}"/> 
    </template> 
    <script type="application/dart" src="data-ul.dart"></script> 
</polymer-element> 

및 각각의 다트 클래스 :

@CustomTag('data-ul') 
class DataUl extends LiElement with Polymer, Observable { 
    DataUl.created() : super.created(); 

    @published List items; 

    void parseDeclaration(Element elementElement) { 
    var t = this.querySelector('#itemTemplate'); // Gets the template with id itemTemplate from the content html 
    if(t != null) // if not null 
     elementElement.append(t); // append itemTemplate to elementElement 

    super.parseDeclaration(elementElement); // call super 
    } 

    void addItem(Event e) { 
    var item = nodeBind(e.target).templateInstance.model['item']; 
    items.add(item); 
    } 
} 

항목이 올바르게 모델에 추가됩니다,하지만 itemTemplate 다시 렌더링되지 않습니다. 나는 이것이 itemTemplate이 범위에서 제거되어 렌더링을 위해 다시 액세스 할 수 없기 때문이라고 생각합니다.

대신 다른 방법을 사용해야합니까 parseDeclaration?

itemTemplate을 다른 곳에 삽입해야합니까?

Answer 1

대신 elementElement를 사용하여, 우리는 element.templateContent를 사용해야합니다

@CustomTag('data-ul') 
class DataUl extends LiElement with Polymer, Observable { 
    DataUl.created() : super.created(); 

    @published List items; 

    void parseDeclaration(Element elementElement) { 
    // We need to remove previous template from element.templateContent 
    // in that way it no continues adding a new content every time that we instantiate 
    // this component. 
    var previousTemplate = element.templateContent.querySelector('#itemTemplate'); 
    if(previousTemplate != null) 
     previousTemplate.remove(); 

    var t = this.querySelector('#itemTemplate'); // Gets the template with id itemTemplate from the content html 
    if(t != null) // if not null 
     element.templateContent.append(t); // append itemTemplate to element.templateContent 
    else 
     element.templateContent.append(new TemplateElement()..id='itemTemplate'); //if no template is added append an empty template to avoid errors 

    super.parseDeclaration(elementElement); // call super 
    } 

    void addItem(Event e) { 
    var item = nodeBind(e.target).templateInstance.model['item']; 
    items.add(item); 
    } 
}