[英]How to render partial template when particular menu clicked in Meteor JS
I am new to Meteor JS. 我是Meteor JS的新手。 How can I render particular template to particular part of web app, when menu clicked.
当单击菜单时,如何将特定模板呈现给Web应用程序的特定部分。 I am using iron-router and layout template.
我正在使用铁路由器和布局模板。 Following layout is working fine.
以下布局工作正常。 For example: When user click on 'Home'> 'Article' menu , I like to render Article template to mainContent region(address bar look like /myapp/Article).
例如:当用户点击“主页”>“文章”菜单时,我喜欢将文章模板渲染到mainContent区域(地址栏看起来像/ myapp / Article)。 Also other menu item works same, when menu item clicked , particular template displays in mainContent part.
其他菜单项也相同,当单击菜单项时,特定模板显示在mainContent部分中。 How can I route this?
我怎么路由这个? I am not sure even it is possible, is there any other way or any better solution around this problem.
我不确定即使有可能,还有其他方法或更好的解决方案来解决这个问题。 router.js
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 的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 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>
You are nearly there :) 你快到了:)
<div class="col-lg-6">
{{> yield 'mainContent'}}
</div>
change to 改成
<div class="col-lg-6">
{{> yield }}
</div>
This is the "main" yield. 这是“主要”收益率。 The iron router will render the template of the route here.
铁路由器将在此处呈现路线的模板。 To identify the template the IR should render, you can do 2 things.
要识别IR应呈现的模板,您可以做两件事。
Do nothing -> Then the Iron Router would render a template named equal to the route's name. 什么也不做 - >然后Iron Router会渲染一个名为等于路径名称的模板。 In your case it would render the template "home".
在您的情况下,它将呈现模板“home”。
Or specify the template for your router: 或者为路由器指定模板:
Router.map(function(){
this.route('home', {
path: '/',
template: 'mySuperTemplateForThisRoute',
layoutTemplate: 'homePageLayout',
yieldTemplates: {
'myHeader': {to: 'header'},
'mySideMenu': {to: 'sideMenu'},
'myMainContent': {to: 'mainContent'},
'myFooter': {to: 'footer'}
}
});
});
I am dealing with my problem like this. 我正在处理这样的问题。 here is my router.js
这是我的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'});
}
});
});
So when particular menu link is clicked it will rendered that template to the 'mainContent' field. 因此,当单击特定菜单链接时,它将该模板呈现到“mainContent”字段。 It works fine.
它工作正常。 But I think there will be more good solution, my solution is repeating code, it may cause 'myheader' and 'myfooter' template loads more than once.
但我认为会有更好的解决方案,我的解决方案是重复代码,它可能导致'myheader'和'myfooter'模板不止一次加载。 I am not sure about it.
我不确定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.