변수 템플릿으로 재사용 가능한 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 템플릿의 컨텍스트에서 두 개의 동적 템플릿을 사용하려고합니다. 당신은 할 수 있습니다 :

<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 }; 
    } 
});