我用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
and footer
在指定位置进行渲染。对于您的情况,您可以指定sidemenu
yield.
不,你有基本的布局和想法,你可以定义另一条路线。说我们称之为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。