Как создать повторно используемый интерфейс с переменным шаблоном?

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

Вы должны быть в состоянии сделать это с динамическими шаблонами. В Blaze вы можете передать шаблон для использования в качестве переменной, а также сам контекст данных. Они довольно гибкие.

Например:

{{> 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 helper просто нужно вернуть имена шаблонов для использования в качестве строк, например:

Template.dropdown.helpers({
  myElements() {

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

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