Polymer：属性に基づいて、同じコンポーネントの複数のテンプレート？

Question

ここでは、1つのPolymerコンポーネントで複数のテンプレートを使用し、属性に基づいて特定のテンプレートに解決する方法を理解しようとしています。

ここではシナリオです：

結果 期待

コンポーネント

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

マークアップ

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

<py-test></py-test>はバーの属性を持っている場合、コンポーネントは2番目のテンプレートを使用する必要があります。それ以外の場合は、最初のテンプレートを使用する必要があります。

誰もがPolymerを提出する方法についての手掛かりを持っていますか？

//編集

マリアは、可能な解決策として、DOM-IFを指摘しました。これは仕事の種類です。私は、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です。初期値を設定すると、それを妨害しています。