javascript - 如何在 Meteor JS 中使用路由器动态更改正文模板？

Question

我需要知道每当单击 meteor js中的按钮时动态更改正文模板。例如，我的应用程序中有总共3个模板。

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

每当单击菜单项时，只会使用路由器包更改为内容模板，而不会进入新页面。所以请建议我该怎么做？

提前致谢。

Answer 1

这可以使用路由器的布局和产量功能来实现。正如这个很棒的教程 http://www.manuel-schoebel.com/blog/iron-router-tutorial 中所定义的

In Meteor we only render and rerender parts of the dom and not always the whole thing. As an example we want to have a layout that specifies a menu, a footer and an area where the main content is rendered in.

这给出了这种 html

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


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

In this template are three areas that the Iron-Router renders in. One 'Main-Yield' and two 'Named-Yields' or 'Regions' with the names 'menu' and 'footer'. The names are important if we want to specify what template we want to render where. We now want that the Iron-Router to use our layout and to render the template 'myMenu' to the yield with the name 'menu' and the template 'myFooter' to the yield named 'footer'.

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

使用此功能，所有路线(或目标路线)可能具有相同的布局，并且仅根据当前页面更改了某些部分。不要忘记可以使用 Router.configure 函数来设置默认值。

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

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