如何在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'
});

這樣做將使開發人員可以定義要在應用程序的不同狀態下使用的默認布局。