폴리머 및 다트의 템플릿의 일부로 컨텐츠 태그 렌더링

Question

폴리머 및 다트를 사용하여 일반 목록을 만들고 싶습니다. 나는 그렇게하기 위해 UL 요소를 확장하고있다. 이 사용자 지정 요소의 내용 내에 템플릿 변수를 배치하려고합니다.

<ul is="data-ul"> 
    <li>{{item['first_name']}}</li> 
</ul> 

내가 템플릿 변수를 기다리고 있었다

<polymer-element name="data-ul" extends="ul"> 
    <template repeat="{{item in items}}"> 
     <content></content> 
    </template> 
    <script type="application/dart" src="data-ul.dart"></script> 
</polymer-element> 

사용자 정의 요소는 그러나 보간 할 그대로 단순히 DOM에 출력됩니다. 출력되는 콘텐츠 태그를 템플릿으로 출력하려면 어떻게해야합니까?

Answer 1

불행히도 여기에는 두 가지 문제가 있습니다.

1. <content>은 이와 같이 사용할 수 없습니다. 그림자 DOM의 특정 위치에 간단한 DOM 노드를 렌더링하기위한 자리 표시 자입니다. 노드를 선택하는 첫 번째 <content>은 [1]으로 우승합니다. 매우 직관적이지만, 당신이하고있는 것처럼 무리를 각인하면 예상대로 작동하지 않습니다.

2. 당신은 폴리머의 내부 세계를 요소 외부의 외부 세계와 혼합합니다. 이것이 의미하는 바는 바인딩 (예 : {{}})은 <polymer-element>의 컨텍스트에서만 작동한다는 것입니다. 당신이 할 수있는

한 것은 당신의 요소의 items 속성으로 분산 된 빛을 DOM 어린이의 복사본을 만드는 것입니다.

<template repeat="{{item in items}}"> 
    <li>{{item['first_name']}}</li> 
</template> 
<content id="content" select="li"></content> 
<script> 
    Polymer('data-ul', { 
    ready: function() { 
     this.items = this.$.content.getDistributedNodes(); 
    } 
    }); 
</script> 

주 : 나는 사용했던 유일한 이유 요소는 <li> 노드에 걸리는 보장하는 것입니다 자바 스크립트에서이처럼 보인다. 다른 유형의 요소를 사용하는 사용자에 대해 걱정하지 않으려면 this.items = [].slice.call(this.children); 만 사용하십시오.

Answer 2

이렇게하려면 parseDeclaration 메서드를 재정의해야합니다. 이 메소드는 바인딩 될 필요가있는 html을 파싱/생성하는 역할을합니다. 예를 들어,

<polymer-element name="data-ul" extends="ul" attributes="items"> 
    <template> 
    <template repeat="{{item in items}}" ref="itemTemplate"></template> <!-- this is the replacement of content tag --> 
    </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) { 
    // 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('template#item'); 
    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 
    } 
} 

그리고 마지막으로 :

<polymer-element name="data-ul" extends="ul" attributes="items"> 
    <template> 
    <template repeat="{{item in items}}"> 
     <!-- Def elements --> 
     <template bind="{{item}}" ref="itemTemplate"></template> <!-- this is the replacement of content tag --> 
     <!-- Def elements --> 
    </template> 
    </template> 
    <script type="application/dart" src="data-ul.dart"></script> 
</polymer-element> 

은 다음 다음 수업을해야을 다음과 같이 맞춤 요소를 사용하십시오.

<ul is="data-ul" items="{{[{'first_name': 'jay'}, {'first_name': 'joy'}]}}"> 
    <template id="itemTemplate"> 
    <li>{{item['first_name']}}</li> 
    </template> 
</ul>