如何使用变量模板创建可重用的 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 做到这一点。在 blaze 中，您可以传入要用作变量的模板，以及数据上下文本身。它们非常灵活。

例如：

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

这将引用 whichTemplate 帮助程序来确定要使用的模板，并从 myData 帮助程序获取数据上下文。即模板的选择和数据的选择都来自variables.

在您的情况下，您正试图在 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 助手只需要 return 模板的名称以用作 strings，例如：

Template.dropdown.helpers({
  myElements() {

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

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

如何使用变量模板创建可重用的 UI？

How to create reusable UI with variable template?

meteor

spacebars