我使用 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。