変数テンプレートを使用して再利用可能なUIを作成する方法は？

Question

は、私はこのような何かをしたい：

コンポーネントファイル：

<template name="drop_down"> 
    <span class="dropdown"> 
     {{> primary_element}} <--- load the template named button 
     <span class="dropdown-panel"> 
      {{> panel_template}} <--- load the template named button_panel 
     </span> 
    </span> 
</template> 

用途：

{{> drop_down primary_element="button" panel_template="button_panel"}} 
<template name="button"> some styled button </template> 
<template name="button_panel"> panel content </template> 

、その後、私はちょうどこの

{{> drop_down primary_element="tmp_btn_2" panel_template="tmp_panel_2"}} 
    <template name="tmp_btn_2"> another button style </template> 
    <template name="tmp_panel_2"> other panel content </template> 

のようにそれを再利用することができます

Answer 1

dynamic templatesでこれを行うことができます。ブレーズでは、変数として使用するテンプレートとデータコンテキスト自体を渡すことができます。彼らは非常に柔軟です。例えば

：

{{> Template.dynamic template=whichTemplate data=myData }} 

これは、使用するテンプレートを把握するwhichTemplateヘルパーを参照してなり、myDataヘルパーからのデータコンテキストを取得します。すなわち、テンプレートの選択とデータの選択の両方が、変数から来る。

dropdownテンプレートのコンテキストで2つのダイナミックテンプレートを使用しようとしています。あなたは行うことができます。

<template name="drop_down"> 
    {{#with myElements}} 
    <span class="dropdown"> 
     {{> Template.dynamic template=this.primary}} 
     <span class="dropdown-panel"> 
     {{> Template.dynamic template=this.panel}} 
     </span> 
    </span> 
{{/with}} 
</template 

を次に、あなたのmyElementsヘルパーはちょうど文字列として使用するテンプレートの名前を返す必要がある、元の：

Template.dropdown.helpers({ 
    myElements() { 

    let p1 = "button"; // compute these two based on your own logic 
    let p2 = "button_panel"; 

    return {primary: p1, panel: p2 }; 
    } 
});