2017-07-05 3 views
0

ポリマーでは、コンテナ要素<x-container>と2つの子要素<a-child>,<b-child>があるとします。ある要素では、<a-child>または<b-child>のいずれかが含まれていることを指定できます。例えばポリマー成分に動的成分を含有させる方法はありますか?

、それは次のようになります。

1. <x-container><a-child></a-child></x-container>

または、

2. <x-container><b-child></b-child></x-container>

<x-container>は、多くのコードを持っているので、私はそれを複製したいのですが、このような<x-container>を使用することができるようにしたくない。その後、前述の最初の項目と同じ動作を持っているでしょう

<x-container type = 'a-child'></x-container> 。この機能をどのように達成できますか?

答えて

1

情報がある場合は、その情報を入力してください。

//in your x-container component 
observers: ['_typeChanged(type)'], 
_typeChanged: function(type) { 
    var child = this.create(type); 
    Polymer.dom(this.root).appendChild(child); 
} 

それとも、ただ単に子供がなるスロットを入れて、あなたがこの

親コンポーネント

<x-container> 
    <template is="dom-if" if="[[_isA()]]"><a-child></a-child></template> 
    <template is="dom-if" if="[[_isB()]]"><b-child></b-child></template> 
</x-container> 

とあなたのX-container'sテンプレートのようになめらかに行うことができますスロットを使用スロット内レンダリング

<slot></slot> 
+0

私は個人的に最初のオプション –

関連する問題