使用 Blaze Meteor.js 动态加载模板（部分）

Question

有什么方法可以使用Meteor.js的onCreated方法动态加载模板吗？我有不同的模板和一个显示区域（主模板）。

<template name="main">

</template>

默认加载的模板

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

通过链接加载模板

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

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

有没有一种方法可以使用 oncreated 函数加载默认模板，并在单击它们时删除（默认）并加载同一主模板中的其他模板？

Answer 1

查看 Template.dynamic。

它允许您仅通过名称加载模板。这里很简单，因为你可以让你的模板通过使用 Reactive var 或 Reactive 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，如果变量更新，它将呈现新模板。

注意：处理传递给模板的数据也很重要。一旦您的动态模板变得更加复杂，您也必须更加意识到这一点。

使用 Blaze Meteor.js 动态加载模板（部分）

Dynamically loading templates (partials) using Blaze Meteor.js

templates

meteor

dynamic

meteor-blaze