使用Ember进行导航的正确方法 [英] Right way to do navigation with Ember
本文介绍了使用Ember进行导航的正确方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
导航边栏是什么正确的方式（或至少选项，如果没有单一的Ember方式）我应该以某种方式查看ContainerView，还是应该使用新的插座功能，并将导航贴在我的应用程序视图中？
此外，正确的方式根据URL（我正在使用路由）在li上设置一个.active类。是否有某种帮助者？
解决方案
<更新日期=2013-01-16 >
以前的示例不再有效，因为路由器API最近的更改，所以我不会修复这些。所有使用旧路由器的应用程序应该尽快迁移到最新版本。
这是一个更新的小提琴：
来源 |
现场演示
我将经常维护/修复/添加功能。
2013年4月3日编辑：
<更新>
2012年11月 - 09
只需添加一个更好的示例的链接，同时解决OP在当前的导航栏项目中选择一个类时，来源于 JSFiddle （点击这里看到它正在运行）
如果你看到NavigationController，你会看到'selected '属性，我用它来检查isActive方法的子视图NavigationItemView。 isActive将根据相同视图（在模板中定义）的菜单属性中的值以及属性中的值返回true或false选择（控制器）。然后检查要为该特定小孩的类设置活动或不设置的classNameBinding表达式。
还要检查ConnectOutlets，这是我正在选择导航项目的地方。
这是在烬 - 最新。
我还使用了一些 Ember.Bootstrap 以及一些原始的Twitter Bootstrap功能/类/ etc（但我已经用 metro-bootstrap 替换了样式）。
由于空间和全部，不会将整个事情粘贴在这里。我将离开原始代码并链接到原来的问题/答案。
我将继续更新这个新的示例，只是因为ember是fun =）
< / Update>
这个小提琴 从视图中显示一个静态导航栏，该插座仅用于显示内容，也可以直接转到显示屏到 看到它正在运行
如您所见，您可以使用包含操作链接的简单视图，并将此视图呈现在应用程序主视图中。
Handlebars ：
$ b开始之下的子路线也有一个迷你导航栏，来自类似的模板。$ b
< script type =text / x-handlebarsdata-template-name =application>
< h1>我的Ember应用程序< / h1>
{{view App.NavbarView controllerBinding =controller.controllers.navbarController}}
< br />< hr />
< div class =content>
{{outlet}}
< / div>
< / script>
< script type =text / x-handlebarsdata-template-name =navbar>
< ul>
< li>< a href =＃{{action gotoHome}}>首页< / a>< / li>
< li>< a href =＃{{action gotoStarting}}>入门< / a>< / li>
< li>< a href =＃{{action gotoCommunity}}>社区< / a>< / li>
< / ul>
< / script>
< script type =text / x-handlebarsdata-template-name =getting-started-menu>
< ul>
< li>< a href =＃{{action gotoIndex}}>概述< / a>< / li>
< li>< a href =＃{{action gotoMVC}}>关于MVC< / a>< / li>
< li>< a href =＃{{action gotoEmber}}>关于Ember< / a>< / li>
< / ul>
< / script>
< script type =text / x-handlebarsdata-template-name =home>
< h2>欢迎< / h2>
< br />
< img src =http://emberjs.com/images/about/ember-productivity-sm.pngalt =ember logo/>
< br />
< br />
< p>培根ipsum dolor sit amet qui ullamco运动，shankle牛肉sed培根地面圆kielbasa in。Prosciutto猪bresaola，qui肉饼肉舌头non dolore和猪肚和andilleille ribeye排骨enim。 Enim exercise elit，brisket nisi ex swine in jerky造成pastrami dolore sed ad。在鼓槌牛，萨拉姆猪回头短肋骨ham sh in shankle因为炖牛肉id。 Deserunt prosciutto牛肉斑点牛腩unt unt;。。。。。。。。。。;;;;;
< p>做牛排肉做鸡肉猪肉，鹿肉，大肠杆菌动物。粗大的柄柄，舌头在猪肉腰部Commodo boudin elit cupidatat turducken id capicola肉丸。牛排牛排火腿肚里脊，id鸡肉stick stick int int。 Dolore veniam cillum minim，pariatur est牛肉。 unt unt; back;;;;;;;;;;;
< br />
< br />
< strong>注意< / strong> ;:这是一个没有< i> bindings< / i>的基本模板。
< / script>
< script type =text / x-handlebarsdata-template-name =starting>
< h2> Ember入门< / h2>
{{view App.StartingMenuView}}
< br />
< br />
< br />
< p>培根ipsum dolor sit amet qui ullamco运动，shankle牛肉sed培根地面圆kielbasa in。Prosciutto猪bresaola，qui肉饼肉舌头non dolore和猪肚和andilleille ribeye排骨enim。 Enim exercise elit，brisket nisi ex swine in jerky造成pastrami dolore sed ad。在鼓槌牛，萨拉姆猪回头短肋骨ham sh in shankle因为炖牛肉id。 Deserunt prosciutto牛肉斑点牛腩unt unt;。。。。。。。。。。;;;;;
< p>做牛排肉做鸡肉猪肉，鹿肉，大肠杆菌动物。粗大的柄柄，舌头在猪肉腰部Commodo boudin elit cupidatat turducken id capicola肉丸。牛排牛排火腿肚里脊，id鸡肉stick stick int int。 Dolore veniam cillum minim，pariatur est牛肉。 unt unt; back;;;;;;;;;;;
< br />
< br />
< strong>注意< / strong> ;:这是一个基本模板，嵌入了菜单视图
< / script>
< script type =text / x-handlebarsdata-template-name =about-mvc>
< h2>关于MVC< / h2>
{{view App.StartingMenuView}}
< br />< br />
< br />< p>
模型 - 视图 - 控制器（MVC）是用于交互式计算机用户界面的软件设计，将信息的表示与用户的交互作用分离。[1] [8]该模型由应用程序数据和业务规则组成，控制器调用输入，将其转换为模型或视图的命令。[3]视图可以是数据的任何输出表示，例如图表或图表。可以使用相同数据的多个视图，例如管理的饼图和会计师的表格视图。
< / p>
请参阅< a href =http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controllertarget =_ blank>维基百科< / a> ;
< br />
< br />
< strong>注意< / strong> ;:这是一个基本模板，嵌入了菜单视图
< / script>
< script type =text / x-handlebarsdata-template-name =about-ember>
< h2>关于Ember< / h2>
{{view App.StartingMenuView}}
< br />< br />
< br />
< p>用于创建< strong>雄心勃勃< / strong>的框架网路应用程式< / p>
请阅读< a href =http://emberjs.com/about/target =_ blank> emberjs.com< / a>
< br />
< br />
< p>培根ipsum dolor sit amet qui ullamco运动，shankle牛肉sed培根地面圆kielbasa in。Prosciutto猪bresaola，qui肉饼肉舌头non dolore和猪肚和andilleille ribeye排骨enim。 Enim exercise elit，brisket nisi ex swine in jerky造成pastrami dolore sed ad。在鼓槌牛，萨拉姆猪回头短肋骨ham sh in shankle因为炖牛肉id。 Deserunt prosciutto牛肉斑点牛腩unt unt;。。。。。。。。。。;;;;;
< p>做牛排肉做鸡肉猪肉，鹿肉，大肠杆菌动物。粗大的柄柄，舌头在猪肉腰部Commodo boudin elit cupidatat turducken id capicola肉丸。牛排牛排火腿肚里脊，id鸡肉stick stick int int。 Dolore veniam cillum minim，pariatur est牛肉。三脚架三脚夹头。< / p>< br />
< br />
< strong>注意< / strong> ;:这是一个基本模板，嵌入了菜单视图
< / script>
< script type =text / x-handlebarsdata-template-name =community>
< h1> Ember社区< / h1>
< p>
联系社区
< / p>
< p>精选联络资讯：< / p>
{{#each item in content}}
< a {{bindAttr href =item.linkUrl}} target =_ blank>
< img height =32width =32{{bindAttr src =item.imageUrltitle =item.displayNamealt =item.displayName}} />< br / >
{{item.displayName}}
< / a>< br />
{{/ each}}
< br />
在< a href =http://emberjs.com/community/target =_ blank> emberjs.com< / a>检查有关ember社区的更多信息。
< br />
< br />
< strong>注意< / strong> ;:这是一个包含< i> foreach< / i>循环类型
< / script>
JavaScript ：
App = Em.Application.create（）;
App.ApplicationController = Em.Controller.extend（）;
App.ApplicationView = Em.View.extend（{
templateName：'application'
}）;
App.HomeController = Em.Controller.extend（）;
App.HomeView = Em.View.extend（{
templateName：'home'
}）;
App.NavbarController = Em.Controller.extend（）;
App.NavbarView = Em.View.extend（{
templateName：'navbar'
}）;
App.StartingController = Em.Controller.extend（）;
App.StartingView = Em.View.extend（{
templateName：'starting'
}）;
App.StartingMenuController = Em.Controller.extend（）;
App.StartingMenuView = Em.View.extend（{
templateName：'get-started-menu'
}）;
App.AboutMVCController = Em.Controller.extend（）;
App.AboutMVCView = Em.View.extend（{
templateName：'about-mvc'
}）;
App.AboutEmberController = Em.Controller.extend（）;
App.AboutEmberView = Em.View.extend（{
templateName：'about-ember'
}）;
App.CommunityModel = Em.Object.extend（{
displayName：null，
linkUrl：null，
imageUrl：null
}）;
App.CommunityController = Em.ArrayController.extend（{
content：[]，
init：function（）{
this._super（）;
this.pushObject（
App.CommunityModel.create（{
displayName：'Twitter'，
linkUrl：'https://twitter.com/#!/emberjs'，
imageUrl：'http://icons.iconarchive.com/icons/iconshots/social-media-network/32/twitter-icon.png'
}））;
this.pushObject（
App.CommunityModel.create（{
displayName：'GitHub'，
linkUrl：'https://github.com/emberjs/ember.js'，
imageUrl：'http ：//www.workinprogress.ca/wp-content/uploads/github.png'
}））;
}
}）;
App.CommunityView = Em.View.extend（{
templateName：'community'，
contentBinding：'App.CommunityController.content'
}）;
App.Router = Em.Router.extend（{
enableLogging：true，
location：'hash'，
root：Em.Route .extend（{
// EVENTS
gotoHome：Ember.Route.transitionTo（'home'），
gotoStarting：Ember.Route.transitionTo（'starting.index'），
gotoCommunity：Ember.Route.transitionTo（'community.index'），
// STATES
home：Em.Route.extend（{
route：'/'，
connectOutlets：function（router，context）{
router.get（'applicationController'）。connectOutlet（'home'）;
}
}），
开始：Em.Route.extend（{
// SETUP
route：'/ starting'，
connectOutlets：function（router，context）{
router.get（'applicationController' ）.connectOutlet（'starting'）;
}，
// EVENTS
gotoMVC：Emb er.Route.transitionTo（'mvc'），
gotoEmber：Ember.Route.transitionTo（'ember'），
gotoIndex：Ember.Route.transitionTo（'index'），
// STATES
index：Em.Route.extend（{
route：'/'，
connectOutlets：function（router，context）{
router.get '的ApplicationController'）connectOutlet（ '起始'）;
}
}），
mvc：Em.Route.extend（{
route：'/ mvc'，
connectOutlets：function（router，context）{
router.get（'applicationController'）。connectOutlet（'aboutMVC'）;
}
}），
ember：Em.Route.extend（{
route： '/ ember'，
connectOutlets：function（router，context）{
router.get（'applicationController'）。connectOutlet（'aboutEmber'）;
}
}）
}），
社区：Em.Route.extend（{
// SETUP
route：'/ community'，
connectOutlets：function（router，context）{
router.get（'applicationController'）。connectOutlet（'community'）;
}，
// EVENTS
// STATES
index：Em .Route.extend（{
route：'/'，
connectOutlets：function（router，context）{
router.get（'applicationController'）。connectOutlet（'community'）;
}
}）
}）
}）
}）;
App.initialize（）;
What's the "right way" (or at least the options, if there is no single "Ember way" of doing this) for a navigation sidebar? Should I be looking at ContainerViews somehow, or should I just use the new outlet feature and stick the navigation inside my application view?
In addition, what's the "right way" to set an .active class on an li depending on the URL (I'm using routing)? Is there some kind of a helper for this?
解决方案
<Update date="2013-01-16">
The previous examples are no longer valid since the recent changes in the Router API, so I'm not going to fix those. All applications using the old router should migrate as soon as possible to the latest.
Here's an updated fiddle: Source | Live Demo
I will be maintaining/fixing/adding features every so often.
Edit on Apr 3rd 2013:
Alternative Sample - WIP: source | demo
ALL CONTENT BELOW IS DEPRECATED
<Update>
2012-Nov-09
Just adding a link to a better sample that also addresses the part which the OP wants to set a class in the current navbar item when a given route is selected
Source in JSFiddle (Click here to see it running)
If you look in the NavigationController you'll see the 'selected' property, which I use to check in the isActive method of the child view NavigationItemView. The isActive will return true or false based on the value in the menu property of the same view (defined in the template) and the value in the property selected (of the controller). Then check the classNameBinding expressions which either sets 'active' or nothing to the class of that particular child.
Also check the ConnectOutlets which is where I'm marking that nav item as selected.
This is running on ember-latest. I'm also using a little of Ember.Bootstrap as well as some of the original Twitter Bootstrap features/classes/etc (but I've replaced the styles with metro-bootstrap).
Not pasting the whole thing here because of space and all. I will leave the original code and link to the same for reference to the original question/answer.
I'll keep updating this new sample just because ember is fun =)
</Update>
This fiddle shows a static navbar from a view, and the outlet is used only for content display, or you can go directly to the display to see it running
As you can see, you can use a simple view containing your action links and have this view rendered in you application main view. The sub-routes under "starting" also have a mini navbar, coming from a similar template.
Handlebars:
<script type="text/x-handlebars" data-template-name="application">
<h1>My Ember Application</h1>
{{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
<br /><hr />
<div class="content">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="navbar">
<ul>
<li><a href="#" {{action gotoHome}}>Home</a></li>
<li><a href="#" {{action gotoStarting}}>Getting Started</a></li>
<li><a href="#" {{action gotoCommunity}}>Community</a></li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="getting-started-menu">
<ul>
<li><a href="#" {{action gotoIndex}}>Overview</a></li>
<li><a href="#" {{action gotoMVC}}>About MVC</a></li>
<li><a href="#" {{action gotoEmber}}>About Ember</a></li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="home">
<h2>Welcome</h2>
<br />
<img src="http://emberjs.com/images/about/ember-productivity-sm.png" alt="ember logo" />
<br />
<br />
<p>Bacon ipsum dolor sit amet qui ullamco exercitation, shankle beef sed bacon ground round kielbasa in. Prosciutto pig bresaola, qui meatloaf ea tongue non dolore et pork belly andouille ribeye spare ribs enim. Enim exercitation elit, brisket nisi ex swine in jerky consequat pastrami dolore sed ad. In drumstick cow, salami swine fatback short ribs ham ut in shankle consequat corned beef id. Deserunt prosciutto beef speck. Sirloin incididunt kielbasa excepteur irure.</p>
<p>Do beef ribs dolore swine chicken shankle, venison officia qui magna ea anim. Jerky shank shankle, tongue in pork loin commodo boudin elit cupidatat turducken id capicola meatball. Strip steak ham hock tenderloin, id chicken drumstick sint jerky. Dolore veniam cillum minim, pariatur est beef. Sunt fatback tri-tip ex chuck.</p>
<br />
<br />
<strong>Note</strong>: This is a basic template with no <i>bindings</i>
</script>
<script type="text/x-handlebars" data-template-name="starting">
<h2>Getting Started with Ember</h2>
{{view App.StartingMenuView}}
<br />
<br />
<br />
<p>Bacon ipsum dolor sit amet qui ullamco exercitation, shankle beef sed bacon ground round kielbasa in. Prosciutto pig bresaola, qui meatloaf ea tongue non dolore et pork belly andouille ribeye spare ribs enim. Enim exercitation elit, brisket nisi ex swine in jerky consequat pastrami dolore sed ad. In drumstick cow, salami swine fatback short ribs ham ut in shankle consequat corned beef id. Deserunt prosciutto beef speck. Sirloin incididunt kielbasa excepteur irure.</p>
<p>Do beef ribs dolore swine chicken shankle, venison officia qui magna ea anim. Jerky shank shankle, tongue in pork loin commodo boudin elit cupidatat turducken id capicola meatball. Strip steak ham hock tenderloin, id chicken drumstick sint jerky. Dolore veniam cillum minim, pariatur est beef. Sunt fatback tri-tip ex chuck.</p>
<br />
<br />
<strong>Note</strong>: This is a basic template has a menu view embedded
</script>
<script type="text/x-handlebars" data-template-name="about-mvc">
<h2>About MVC</h2>
{{view App.StartingMenuView}}
<br /><br />
<br /><p>
Model–View–Controller (MVC) is a software design for interactive computer user interfaces that separates the representation of information from the user's interaction with it.[1][8] The model consists of application data and business rules, and the controller mediates input, converting it to commands for the model or view.[3] A view can be any output representation of data, such as a chart or a diagram. Multiple views of the same data are possible, such as a pie chart for management and a tabular view for accountants.
</p>
Read more at <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" target="_blank">Wikipedia</a>
<br />
<br />
<strong>Note</strong>: This is a basic template has a menu view embedded
</script>
<script type="text/x-handlebars" data-template-name="about-ember">
<h2>About Ember</h2>
{{view App.StartingMenuView}}
<br /><br />
<br />
<p>A framework for creating <strong>ambitious</strong> web applications</p>
Read more at <a href="http://emberjs.com/about/" target="_blank">emberjs.com</a>
<br />
<br />
<p>Bacon ipsum dolor sit amet qui ullamco exercitation, shankle beef sed bacon ground round kielbasa in. Prosciutto pig bresaola, qui meatloaf ea tongue non dolore et pork belly andouille ribeye spare ribs enim. Enim exercitation elit, brisket nisi ex swine in jerky consequat pastrami dolore sed ad. In drumstick cow, salami swine fatback short ribs ham ut in shankle consequat corned beef id. Deserunt prosciutto beef speck. Sirloin incididunt kielbasa excepteur irure.</p>
<p>Do beef ribs dolore swine chicken shankle, venison officia qui magna ea anim. Jerky shank shankle, tongue in pork loin commodo boudin elit cupidatat turducken id capicola meatball. Strip steak ham hock tenderloin, id chicken drumstick sint jerky. Dolore veniam cillum minim, pariatur est beef. Sunt fatback tri-tip ex chuck.</p><br />
<br />
<strong>Note</strong>: This is a basic template has a menu view embedded
</script>
<script type="text/x-handlebars" data-template-name="community">
<h1>Ember Community</h1>
<p>
Get in touch with the community
</p>
<p>Featured contact info:</p>
{{#each item in content}}
<a {{bindAttr href="item.linkUrl" }} target="_blank">
<img height="32" width="32" {{bindAttr src="item.imageUrl" title="item.displayName" alt="item.displayName"}} /><br />
{{item.displayName}}
</a><br />
{{/each}}
<br />
Check more information about ember community at <a href="http://emberjs.com/community/" target="_blank">emberjs.com</a>
<br />
<br />
<strong>Note</strong>: This is a template with a <i>foreach</i> type of loop
</script>
JavaScript:
App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.HomeController = Em.Controller.extend();
App.HomeView = Em.View.extend({
templateName: 'home'
});
App.NavbarController = Em.Controller.extend();
App.NavbarView = Em.View.extend({
templateName: 'navbar'
});
App.StartingController = Em.Controller.extend();
App.StartingView = Em.View.extend({
templateName: 'starting'
});
App.StartingMenuController = Em.Controller.extend();
App.StartingMenuView = Em.View.extend({
templateName: 'getting-started-menu'
});
App.AboutMVCController = Em.Controller.extend();
App.AboutMVCView = Em.View.extend({
templateName: 'about-mvc'
});
App.AboutEmberController = Em.Controller.extend();
App.AboutEmberView = Em.View.extend({
templateName: 'about-ember'
});
App.CommunityModel = Em.Object.extend({
displayName: null,
linkUrl: null,
imageUrl: null
});
App.CommunityController = Em.ArrayController.extend({
content: [],
init: function() {
this._super();
this.pushObject(
App.CommunityModel.create({
displayName: 'Twitter',
linkUrl: 'https://twitter.com/#!/emberjs',
imageUrl: 'http://icons.iconarchive.com/icons/iconshots/social-media-network/32/twitter-icon.png'
}));
this.pushObject(
App.CommunityModel.create({
displayName: 'GitHub',
linkUrl: 'https://github.com/emberjs/ember.js',
imageUrl: 'http://www.workinprogress.ca/wp-content/uploads/github.png'
}));
}
});
App.CommunityView = Em.View.extend({
templateName: 'community',
contentBinding: 'App.CommunityController.content'
});
App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',
root: Em.Route.extend({
// EVENTS
gotoHome: Ember.Route.transitionTo('home'),
gotoStarting: Ember.Route.transitionTo('starting.index'),
gotoCommunity: Ember.Route.transitionTo('community.index'),
// STATES
home: Em.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('home');
}
}),
starting: Em.Route.extend({
// SETUP
route: '/starting',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('starting');
},
// EVENTS
gotoMVC: Ember.Route.transitionTo('mvc'),
gotoEmber: Ember.Route.transitionTo('ember'),
gotoIndex: Ember.Route.transitionTo('index'),
// STATES
index: Em.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('starting');
}
}),
mvc: Em.Route.extend({
route: '/mvc',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('aboutMVC');
}
}),
ember: Em.Route.extend({
route: '/ember',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('aboutEmber');
}
})
}),
community: Em.Route.extend({
// SETUP
route: '/community',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('community');
},
// EVENTS
// STATES
index: Em.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('community');
}
})
})
})
});
App.initialize();
这篇关于使用Ember进行导航的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
