Polymer: несколько шаблонов для одного и того же компонента, основанного на атрибуте?

Question

Я собираюсь немного серым здесь, пытаясь понять, как можно использовать несколько шаблонов в одном компоненте Polymer и разрешать определенный шаблон на основе атрибута.

Вот сценарий:

Компонент

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

Markup

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

Ожидаемый результат Если <py-test></py-test> имеет атрибут бара, в компонент должен использовать второй шаблон. В противном случае он должен использовать первый шаблон.

Кто-нибудь знает, как победить Полимер в подчинении?

// Редактировать

Мария отметила, дом-если в качестве возможного решения. Какая работа. Я использовал пример выше, чтобы добавить РОМ, если проверки:

<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.

Это может быть немного запутанным, как Полимер обрабатывает логические атрибуты. Если они присутствуют, соответствующее свойство равно true, иначе это false. Если вы устанавливаете начальные значения, вы мешаете этому.