Meteor.js应用程序模板中的多次屈服

Question

在呈现我的页面的布局文件中，我有一个用于iron router的通用{{>yield}}}，这些页面是模板。

在我的一个页面中，我有一个侧菜单，根据该菜单中的选择，我想在该页面中加载与该页面相关的不同模板。

我怎样才能做到这一点？

Answer 1

我使用iron路由器的layout template选项做了类似的事情。假设我想创建一个主视图，该主视图中有多个视图/模板，这些视图/模板将发生更改。首先我会申报我的路线：

Router.map(function () {
  this.route('home', {
  path: '/',
  template: 'myHomeTemplate',
  layoutTemplate: 'layout',
  yieldTemplates: {
    'myAsideTemplate': {to: 'aside'},
    'myFooter': {to: 'footer'}
    }
  });
});

布局模板的html如下所示：

 <template name="layout">
   <aside>
     {{> yield region='aside'}}
   </aside>
  <div>
    {{> yield}}
  </div>
  <footer>
    {{> yield region='footer'}}
  </footer>
</template>

使得在生成aside和footer中指定的模板在指定的点中渲染。对于您的情况，您可以指定sidemenu收益率。

不，你有基本的布局和想法，你可以定义另一条路线。假设我们称之为differentHome。

Router.map(function () {
  this.route('differentHome', {
  path: '/differentHome',
  template: 'myHomeTemplate',
  layoutTemplate: 'layout',
  yieldTemplates: {
    'myDifferentAsideTemplate': {to: 'aside'},
    'myDifferentFooter': {to: 'footer'}
    }
  });
});

请注意，在这个路由声明中，我正在更改yield模板，但不会更改将在主yield中呈现的基本模板。现在，在一个事件上，你可以重新路由，这将改变两个不同的收益模板：

Router.go("differentHome"); 

或者你可以用html来路由，比如说用一个链接。

EDIT（Hapharm Solution）：

使用会话变量听写侧菜单选项。

HTML:
<template name="main">
  ......
   <div class="sideMenu">   
     {{#if sideMenu1}}
        {{> side1Template}}
     {{/if}}
     {{#if sideMenu2}}
        {{> side2Template}}
     {{/if}}
   </div>
 </template>
JS:
Template.main.helpers({
    sideMenu1 : function () {
         return Session.equals("sideMenuChoice", "sideMenu1")  
    },
    sideMenu2 : function () {
         return Session.equals("sideMenuChoice", "sideMenu2")  
    }
 });

现在，在一个事件中，将Session设置为MenuChoice。