如何在Meteor JS中使用路由器动态更改主体模板？

Question

我需要知道每次在流星js中单击按钮时都会动态更改主体模板。例如，我的应用程序中总共有3个模板。

1. 一个模板是标题模板
2. 第二个是侧面菜单模板
3. 另一个是内容模板

每当单击菜单项时，仅通过使用路由器软件包更改为内容模板，而不转到新页面。因此，请建议我该怎么做？

提前致谢。

Answer 1

使用路由器的布局和等级功能可以做到这一点。 如本awesom教程中所定义：http://www.manuel-schoebel.com/blog/iron-router-tutorial

在Meteor中，我们仅渲染和重新渲染dom的一部分，而并不总是渲染整个对象。 作为示例，我们希望有一个布局，该布局指定菜单，页脚和显示主要内容的区域。

这给出了这种HTML

<template name="complexLayout">
 <div class="left">
    {{> yield region="menu"}}
  </div>


  <div class="main">
    {{> yield}}
  </div>
  <div class="bottom">
    {{> yield region="footer"}}
  </div>
</template>

在此模板中，Iron-Router呈现了三个区域。一个名为“ Main-Yield”的区域，两个名为“ menu”和“ footer”的“ Named-Yields”或“ Regions”。 如果我们要指定要在哪里渲染的模板，则名称很重要。 现在，我们希望Iron-Router使用我们的布局，并将模板“ myMenu”渲染为名称为“ menu”的良品，并将模板“ myFooter”渲染为名为“ footer”的良品。

this.route('home', {
  path: '/',
  layoutTemplate: 'complexLayout',
  yieldTemplates: {
    'myMenu': {to: 'menu'},
    'myFooter': {to: 'footer'}
  }
});

使用此功能，所有路由（或目标路由）可能具有相同的布局，并且仅更改了某些部分，具体取决于当前页面。 不要忘记，可以使用Router.configure函数设置默认值。

Router.configure({
  layoutTemplate: 'complexLayout',
  notFoundTemplate: 'notFound',
  loadingTemplate: 'loading'
});

这样做将使开发人员可以定义要在应用程序的不同状态下使用的默认布局。