テンプレートであるページをレンダリングするレイアウト ファイルに、iron-router 用の一般的な {{>yield}} が 1 つあります。
私のページの 1 つにサイド メニューがあり、このメニューでの選択に従って、このページに関連するさまざまなテンプレートをこのページにロードしたいと考えています。
どうすればこれを達成できますか?
テンプレートであるページをレンダリングするレイアウト ファイルに、iron-router 用の一般的な {{>yield}} が 1 つあります。
私のページの 1 つにサイド メニューがあり、このメニューでの選択に従って、このページに関連するさまざまなテンプレートをこのページにロードしたいと考えています。
どうすればこれを達成できますか?
layout template
私は、iron-router のオプションを使用して同様のことを行いました。変更されるこのホーム ビュー内に複数のビュー/テンプレートを含むホーム ビューを作成したいとします。まず、ルートを宣言します。
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 でレンダリングされる基本的なテンプレートは変更していません。イベントでは、2 つの異なる歩留まりテンプレートを変更するルートを変更できます。
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")
}
});
イベントで、Session を sideMenuChoice に設定します。