当特定菜单单击Meteor JS时,如何渲染部分模板
-
21-12-2019 - |
题
我是Meteor JS的新手。如何将特定模板渲染到特定的Web应用程序,当菜单单击时。我正在使用铁路路由器和布局模板。 以下布局正常工作。例如:当用户单击“主页”>“文章”菜单时 ,我喜欢将物品模板渲染到MainContent Region(地址栏看起来像/ 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>
.
解决方案
你几乎存在:)
<div class="col-lg-6">
{{> yield 'mainContent'}}
</div>
.
更改为
<div class="col-lg-6">
{{> yield }}
</div>
.
这是“主要”产量。铁路路由器将在此呈现路线的模板。要识别IR应呈现的模板,您可以执行2件事。
不做 - >然后铁路由器将渲染名为等于路由名称的模板。在您的情况下,它将呈现模板“home”。
或为路由器指定模板:
Router.map(function(){
this.route('home', {
path: '/',
template: 'mySuperTemplateForThisRoute',
layoutTemplate: 'homePageLayout',
yieldTemplates: {
'myHeader': {to: 'header'},
'mySideMenu': {to: 'sideMenu'},
'myMainContent': {to: 'mainContent'},
'myFooter': {to: 'footer'}
}
});
});
. 其他提示
我正在处理这样的问题。 这是我的路由器.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”模板加载多次。我不确定它。
不隶属于 StackOverflow