Meteor.js应用程序模板中的多个产量

Question

我在布局文件中有一个用于铁路由器的通用{{> yield}},它呈现我的页面,这是模板.

在我的一个页面中,我有一个侧边菜单,根据此菜单中的选择,我想在此页面中加载与此页面相关的不同模板.

我怎样才能做到这一点？

Answer 1

我使用iron-router的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中呈现的基本模板.现在,您可以重新路由一个会更改两个不同yield模板的事件:

Router.go("differentHome"); 

或者您可以使用html进行路由,例如使用链接.

编辑(Haphazard 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.