特定のメニューがMeteor JSでクリックしたときに部分テンプレートをレンダリングする方法

Question

私は流星JSに新しいものです。メニューをクリックしたときに、特定のテンプレートをWebアプリの特定の部分にレンダリングする方法があります。私は鉄ルーターとレイアウトテンプレートを使っています。 以下のレイアウトがうまく機能しています。例：ユーザーが 'Home'> '記事'メニューをクリックすると 私は記事のテンプレートをMainContent領域にレンダリングするのが好きです（アドレスバーのように見えます/ myapp /記事のように見えます）。また、メニュー項目をクリックしたときに、他のメニュー項目が同じように機能します。どうやってこれを配信できますか？私はそれが可能であると確信していません、この問題の周りに他の方法やより良い解決策はありますか。 router.js

Router.map(function(){this.route('home', {
path: '/',
layoutTemplate: 'homePageLayout',
yieldTemplates: {
  'myHeader': {to: 'header'},
  'mySideMenu': {to: 'sideMenu'},
  'myMainContent': {to: 'mainContent'},
  'myFooter': {to: 'footer'}
}

.

}）。 ;）;

layout.html

<template name="homePageLayout">
<div class="container">
    <div class="row">
        {{> yield  region='header'}}
    </div>
    <div class="row">
        <div class="col-lg-3">
            {{> yield region='sideMenu'}}
        </div>
        <div class="col-lg-6">
            {{> yield 'mainContent'}}
        </div>
    </div>
    <div class="row">
        <footer>
            {{> yield region='footer'}}
        </footer>
    </div>
</div>

.

SideMenu.html

<template name="mySideMenu">
<div class="content"></div>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-home"></span>
                        Home
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td>
                                <a href="{{pathFor 'mission'}}"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Article
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    News
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Report
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        Company
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Mission
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    About us
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Contact
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

.

Answer 1

あなたはそこにあります:)

<div class="col-lg-6">
    {{> yield 'mainContent'}}
</div>

.

に変更します

<div class="col-lg-6">
    {{> yield }}
</div>

.

これは「主な」歩留まりです。鉄ルーターはここでのルートのテンプレートをレンダリングします。IRがレンダリングするべきテンプレートを識別するには、2つのことを実行できます。

何もしない - >それから鉄のルーターはルートの名前と同じ名前のテンプレートをレンダリングします。あなたの場合はテンプレート「ホーム」をレンダリングするでしょう。

またはルータのテンプレートを指定します。

Router.map(function(){
    this.route('home', {
        path: '/',
        template: 'mySuperTemplateForThisRoute',
        layoutTemplate: 'homePageLayout',
        yieldTemplates: {
          'myHeader': {to: 'header'},
          'mySideMenu': {to: 'sideMenu'},
          'myMainContent': {to: 'mainContent'},
          'myFooter': {to: 'footer'}
        }
    });
});

.

Answer 2

私はこのような私の問題を扱っています。 これが私のrouter.js

です

        Router.map(function(){
  this.route('home', {
  path: '/',
  layoutTemplate: 'homePageLayout',
  action: function(){
    this.render('myHeader', {to: 'header'});
    this.render('mySideMenu', {to: 'sideMenu'});
    this.render('home', {to: 'mainContent'});
    this.render('myFooter', {to: 'footer'});
  }
});

  this.route('showMission', {
    path: 'mission',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('mission', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });

  this.route('showCompanyStructure', {
    path: 'companyStructure',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('companyStructure', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });

  this.route('showDuties', {
    path: 'duties',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('duties', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });
});

.

それで、特定のメニューリンクをクリックすると、そのテンプレートを 'mainContent'フィールドにレンダリングします。 うまく機能します。しかし、私はもっと良い解決策があると思います、私の解決策はコードを繰り返しています、それは 'myheader'と 'myfooter'のテンプレートを複数回読み込むかもしれません。私はそれについてわからない。