5

テンプレートであるページをレンダリングするレイアウト ファイルに、iron-router 用の一般的な {{>yield}} が 1 つあります。

私のページの 1 つにサイド メニューがあり、このメニューでの選択に従って、このページに関連するさまざまなテンプレートをこのページにロードしたいと考えています。

どうすればこれを達成できますか?

4

1 に答える 1

11

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>

そのため、指定されたテンプレートが生成asidefooterれ、指定された場所にレンダリングされます。あなたの場合、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 に設定します。

于 2014-08-27T13:33:12.800 に答える