Polymer : 속성을 기반으로 한 동일한 구성 요소에 대한 여러 템플릿?

Question

하나의 Polymer 구성 요소에 둘 이상의 템플릿이 있고 속성을 기반으로 특정 템플릿으로 해석하는 방법을 알아 내려고 여기에서 약간 회색으로 표시하려고합니다. 바의 속성을 가지고 <py-test></py-test> 경우

구성 요소

<dom-module id="py-test"> 
    <template> 
     Foo 
    </template> 
    <template> 
     Bar 
    </template> 
    <script> 
     Polymer({ 
      is: "py-test" 
     }) 
    </script> 
</dom-module> 

마크 업

<py-test bar></py-test> 

예상 결과 : 여기

는 시나리오이다 구성 요소는 두 번째 템플릿을 사용해야합니다. 그렇지 않으면 첫 번째 템플릿을 사용해야합니다.

누구든지 Polymer를 제출하는 방법에 대한 단서가 있습니까? // 편집

마리아

지적 DOM-경우 가능한 솔루션으로. 어떤 일을하는지. 나는 DOM-경우 검사 추가 위의 예제를 사용 :

<dom-module id="py-test"> 
    <template> 
     <template is="dom-if" if="[[foo]]"> 
      Foo 
     </template> 
     <template is="dom-if" if="[[bar]]"> 
      Bar 
     </template> 
    </template> 
    <script> 
     Polymer({ 
      is: "py-test", 
      properties: { 
       foo: { 
        type: Boolean, 
        value: true 
       }, 
       bar: { 
        type: Boolean, 
        value: false 
       } 
      } 
     }) 
    </script> 
</dom-module> 

을하지만 난이 <py-test> 요소 자체에 설정된 속성으로이 넥타이 수있는 방법을 볼 수 없습니다.

Answer 1

거의 편집 했으니 까. properties 개체의 초기 값을 제거하기 만하면됩니다.

<dom-module id="py-test"> 
    <template> 
     <template is="dom-if" if="[[foo]]"> 
      Foo 
     </template> 
     <template is="dom-if" if="[[bar]]"> 
      Bar 
     </template> 
    </template> 
    <script> 
     Polymer({ 
      is: "py-test", 
      properties: { 
       foo: { 
        type: Boolean, 
       }, 
       bar: { 
        type: Boolean, 
       } 
      } 
     }) 
    </script> 
</dom-module> 

당신은 다음과 같이 사용할 수 있습니다 :

<py-test foo></py-test> 
<py-test bar></py-test> 

가 여기 plunk입니다.

Polymer에서 부울 속성을 처리하는 방법이 다소 혼란 스러울 수 있습니다. 존재하는 경우 관련된 속성은 true이고, 그렇지 않으면 false입니다. 초기 값을 설정하면 방해가됩니다.