我在布局文件中为铁路由器提供了一个通用{{> yield}},用于呈现我的网页,即模板。
在我的一个页面中,我有一个侧边菜单,根据此菜单中的选择,我想在此页面中加载与此页面相关的不同模板。
我怎样才能做到这一点?
答案 0 :(得分: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>
以便在yield 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设置为whatMenuChoice。