5

I have one general {{>yield}} for iron-router in a layout file which renders my pages, which are templates.

In one of my pages, I have a side menu and according to the selection in this menu, I want to load different templates related to this page in this page.

How can I achieve this?

4

1 回答 1

11

我使用 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'}
    }
  });
});

请注意，在此路由声明中，我正在更改收益模板，但我没有更改将在主收益中呈现的基本模板。现在在一个事件中，您可以重新路由这将更改两个不同的产量模板：

Router.go("differentHome");

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

编辑（随意解决方案）：

使用会话变量来决定侧边菜单的选择。

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")  
    }
 });

现在在一个事件上将会话设置为任何 sideMenuChoice。

于 2014-08-27T13:33:12.800 回答