폴리머 사용자 정의 요소를 내용에 바인딩하는 방법은 무엇입니까?

Question

요소에 어떤 내용이 제공되는지에 따라 동적 탭 수가있는 요소를 만들려고합니다. 이 작업을 수행하는 방법을 알아 낸 유일한 방법은 JS이지만 Polymer 방식이 아닌 느낌이 들었습니다. 무엇이 빠져 있습니까? 내가 시작하는 데 도움이 될 몇 가지 문서 또는 기타 요소를 가르쳐 주시겠습니까? 내 사용자 정의 요소 내 사용자 지정 요소

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="/bower_components/core-pages/core-pages.html"> 
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html"> 

<polymer-element name="code-file-set"> 
    <template> 

     <paper-tabs id="tabs" selected={{selected}}> 
     </paper-tabs> 

     <core-pages selected="{{selected}}"> 
     <content id="codecontent" select="a"></content> 
     </core-pages> 
    </template> 

<script> 

    Polymer('code-file-set', { 
    domReady: function() { 
     var codeNodes = this.$.codecontent.getDistributedNodes(); 

     for (var i = 0; i < codeNodes.length; i++) { 
     var name = codeNodes[i].getAttribute('tabTitle'); 
     var tab = document.createElement('paper-tab'); 
     tab.innerHTML = name; 
     this.$.tabs.appendChild(tab); 
     }  
     this.selected = 0; 
    }, 
    }); 
</script> 
</polymer-element> 

이 작품의

<code-file-set> 
    <a href="#" tabTitle="onelink">onelink</a> 
    <a href="#" tabTitle="twolink">twolink</a> 
    <a href="#" tabTitle="threelink">threelink</a> 
</code-file-set> 

구현을 사용

, 그러나 그것은 추한 것 같다

여기에 지금까지 무슨이다. 즉, JS에서는 수행되지 않지만 HTML에서는 더 선언적인 방식으로 탭을 작성할 수 있습니다 (내용에있는 요소 당 하나의 탭을 작성 함).

Answer 1

올바른 데이터 바인딩 솔루션은 배열 (tabs)을 published property으로 정의하고 template repeat을 사용하여 배열을 반복하고 각 항목을 UI에 채 웁니다.

<polymer-element name="code-file-set" attributes="tabs"> 
    <template> 
     <paper-tabs style="background-color:limegreen" selected="0"> 
      <template repeat="{{tab in tabs}}"> 
       <paper-tab> 
        <a href="{{tab.link}}">{{tab.tabTitle}}</a> 
       </paper-tab> 
      </template> 
     </paper-tabs> 
    </template> 

    <script> 
     Polymer('code-file-set', { 
      ready: function() { 
       this.tabs = []; 

       for (var i = 0; i <= 3; i++) { 
        this.tabs.push({ link: '#', tabTitle: 'title ' + i }); 
       } 
      }, 
     }); 
    </script> 
</polymer-element> 

는 작업 예로서이 jsbin를 참조하십시오.

Answer 2

데이터 바인딩을 사용하는 데 제한이 없으므로 이미 받아 들여졌지만 답변을 추가하고 싶습니다. 콘텐츠를 사용하는 것이 더 바람직한 경우가 많이 있습니다. 조금 더 많은 작업이 있지만 그렇게 선택하면 내부의 다른 요소를 작성할 수 있습니다.

<content> 요소를 사용하는 경우 getDistributedNodes()을 사용하여 배포 된 하위 항목에 도달 할 수 있습니다. <content> 요소에 select 특성을 추가하면 텍스트 노드를 무시하고 원하는 요소 만 NodeList를 만듭니다. 예 : <content select="a">. 그런 다음 해당 자식을 가리키는 내부 변수를 만들고 해당 변수와 함께 template repeat를 사용합니다.

코드 예제 :

<polymer-element name="x-menu"> 
    <template> 
    <style> 
     ::content > * { 
     display: none; 
     } 
    </style> 
    <content id="content" select="a"></content> 
    <paper-tabs link> 
     <template repeat="{{tab in tabs}}"> 
     <paper-tab> 
      <a href="{{tab.href}}" horizontal center-center layout> 
      {{tab.textContent}} 
      </a> 
     </paper-tab>   
     </template> 
    </paper-tabs> 
    </template> 
    <script> 
    Polymer({ 
     domReady: function() { 
     this.tabs = this.$.content.getDistributedNodes().array(); 
     } 
    }); 
    </script> 
</polymer-element> 

<x-menu> 
    <a href="#foo">Foo</a> 
    <a href="#bar">Bar</a> 
    <a href="#baz">Baz</a> 
</x-menu> 

예를 들어 jsbin : http://jsbin.com/duzapu/6/edit

한 가지는 당신이 어떤 시점에서 변경하는 아이의 수를 예상하는 경우, 당신은 onMutation을 사용하고 주시해야한다,주의해야 할 그에 따라 내부 변수를 업데이트하십시오.