Javascript 如何在Meteor JS中单击特定菜单时渲染部分模板

我是流星JS的新手。单击菜单时，如何将特定模板呈现到web应用程序的特定部分。我使用铁路由器和布局模板。 下面的布局工作正常。例如：当用户单击“主页”>“文章”菜单时 ，我喜欢将文章模板呈现到mainContent区域（地址栏看起来像/myapp/Article）。其他菜单项的工作原理也一样，当单击菜单项时，特定的模板将显示在mainContent部分中。我怎么走这条路？我甚至不确定这是否可能，是否有其他方法或更好的解决办法来解决这个问题。 路由器.js

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

        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'});
    }
  });
});

}))； });

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>

{{>yield region='header'}
{{>yield region='sideMenu'}
{{>yield'mainContent'}
{{>yield region='footer'}

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>

你就快到了：）

---

我正在这样处理我的问题。 这是我的路由器.js

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

        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”模板加载不止一次。我不确定

{{>yield}}我试图使用这个，但当加载特定的路由时，它将只显示该模板，而不显示“myHeader”和“myFooter”模板。这就是为什么我的布局不能像我画的那样工作的原因。我错过了我的路线。configure（）我修好了，现在它运行良好。正是你说的，谢谢。我真的很喜欢看你的博客，继续你的努力。再次感谢。

        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'});
    }
  });
});