如何在流星JS中渲染特定菜单时的部分模板
How to render partial template when particular menu clicked in Meteor JS
我是Meteor JS的新手。我如何渲染特定的模板,以特定部分的web应用程序,当菜单单击。我使用铁路由器和布局模板。下面的布局工作良好。例如:当用户点击"主页">"文章"菜单时,我喜欢渲染文章模板到mainContent区域(地址栏看起来像/myapp/Article)。其他菜单项的工作原理相同,当单击菜单项时,特定的模板显示在mainContent部分。我该如何发送邮件?我甚至不确定这是否可能,是否有其他方法或更好的解决方案来解决这个问题。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应该渲染的模板,您可以做两件事。
什么都不做->那么,Iron Router就会呈现一个与路由名相同的模板。在你的例子中,它会将模板渲染为"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'}
}
});
});
我这样处理我的问题。这是我的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'模板加载不止一次。我不确定。
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- angular的下拉菜单
- 如何使用铁流星与流星的默认路线
- 使用JQuery的动态上下文菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 在流星上使用微信js-sdk时出现拒绝权限错误
- 下拉菜单在菜单按钮的边缘闪闪发光
- Div根据<选择>菜单
- 流星中DOM的繁殖
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 流星+聚合物-核心子菜单投掷'undefined不是对象(正在评估'this.items.length&
- 流星下拉菜单在移动视图中不起作用
- 流星类别和子类别选择菜单
- 如何在流星JS中渲染特定菜单时的部分模板
- 流星和选择菜单
- 流星现场手风琴菜单
- 如何为流星站点添加菜单/子主题