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动态加载模板（部分）

1 个答案: