使用blaze meteor js动态加载模板(部分)

退房 Template.dynamic .

它允许您仅按模板的名称加载模板。这里很简单,因为您可以让模板通过使用反应变量或反应dict来处理动态名称。

声明一些模板:

<template name="main">
 {{> Template.dynamic template=getTemplateName }}

 <button class="loadTemplate" data-target="page1">Load Page 1</button> 
 <button class="loadTemplate" data-target="page2">Load Page 2</button> 
</template>

<template name="page1">
</template>
<template name="page2">
</template>

<template name="default">
</template>

在主模板中可以设置 onCreated 默认模板名称 default :

Template.main.onCreated(function(){
  this.state = new ReactiveDict();
  this.state.set("targetTemplate", "default");
})

通过帮助程序获取要加载的模板:

Template.main.helpers({
  getTemplateName() {
    return Template.instance().state.get("targetTemplate");
  },
})

并通过按钮单击事件设置新模板名称:

Template.main.events({
  'click .loadTemplate'(event, templateInstance) {
    event.preventDefault();
    const targetName = $(event.currentTarget).attr('data-target');
    templateInstance.state.set("targetTemplate", targetName);
  }
})

当然,您也可以通过其他事件来实现这一点,而不仅仅是通过单击按钮,因为它依赖于reactivedict/reactivevar,如果变量更新,它将呈现新模板。

注意:非常重要的是处理传递给模板的数据。一旦你的动态模板变得更加复杂,你也必须更加清楚这一点。