【发布时间】：2013-02-14 10:08:47
【问题描述】：
我想用 Ember 显示一个崩溃的路径。如何遍历当前路径？
在我看来有两种方法：
余烬之路
编辑：见下面我的回答
我会根据当前显示面包屑的状态更新此问题。您可以浏览此问题的修订版本以查看历史记录。
这里有几个目标：
- 监听路线变化
- 寻找当前路线
- 显示当前路线列表
- 显示路线中步骤的工作链接
控制器
App.ApplicationController = Ember.Controller.extend({
needs: ['breadcrumbs'],
currentPathDidChange: function() {
path = this.get('currentPath');
console.log('path changed to: ', path);
this.get('controllers.breadcrumbs').set('content',this.get('target.router.currentHandlerInfos'));
}.observes('currentPath')
});
App.BreadcrumbsController = Em.ArrayController.extend({});
路由器
App.ApplicationRoute = Ember.Route.extend({
renderTemplate: function() {
this.render();
this.render('breadcrumbs', {
outlet: 'breadcrumbs',
into: 'application',
controller: this.controllerFor('breadcrumbs')
});
}
});
模板
{{! application template }}
<div class="clearfix" id="content">
{{outlet "breadcrumbs"}}
{{outlet}}
</div>
{{! breadcrumbs template }}
<ul class="breadcrumb">
{{#each link in content}}
<li>
<a {{bindAttr href="link.name"}}>{{link.name}}</a> <span class="divider">/</span>
</li>
{{/each}}
</ul>
目前要解决的问题是：
- 当我转到 URL：
#/websites/8/pages/1时，面包屑的输出是：（我删除了所有脚本标签占位符
<ul class="breadcrumb">
<li>
<a href="application" data-bindattr-34="34">application</a> <span class="divider">/</span></li>
<li>
<a href="sites" data-bindattr-35="35">sites</a> <span class="divider">/</span>
</li>
<li>
<a href="site" data-bindattr-36="36">site</a> <span class="divider">/</span>
</li>
<li>
<a href="pages" data-bindattr-37="37">pages</a> <span class="divider">/</span>
</li>
<li>
<a href="page" data-bindattr-38="38">page</a> <span class="divider">/</span>
</li>
<li>
<a href="page.index" data-bindattr-39="39">page.index</a> <span class="divider">/</span>
</li>
</ul>
- URL 应该是有效的路由
- 菜单现在用
{{#linkTo}}硬编码到路线，我试图让它动态化，比如here，但transitionTo不会触发currentPath-observer
另一种方式
大部分与上述相同，但有一些不同之处。面包屑是通过循环 location.hash 而不是从路由器获取的。
ApplicationController 变为：
ApplicationController = Ember.Controller.extend({
needs: ['breadcrumbs'],
hashChangeOccured: function(context) {
var loc = context.split('/');
var path = [];
var prev;
loc.forEach(function(it) {
if (typeof prev === 'undefined') prev = it;
else prev += ('/'+it)
path.push(Em.Object.create({ href: prev, name: it }));
});
this.get('controllers.breadcrumbs').set('content',path)
}
});
ready : function() {
$(window).on('hashchange',function() {
Ember.Instrumentation.instrument("hash.changeOccured", location.hash);
});
$(window).trigger('hashchange');
}
我们需要在 ApplicationRoute
中订阅自定义处理程序App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller, model) {
Ember.Instrumentation.subscribe("hash.changeOccured", {
before: function(name, timestamp, payload) {
controller.send('hashChangeOccured', payload);
},
after: function() {}
});
}
});
到目前为止，替代方法对我来说效果最好，但这不是一个好方法，因为当您将路由器配置为使用 history 而不是 location.hash 时，此方法将不再有效。
【问题讨论】：
-
你能出示你的代码吗？
-
你试过在路由器中设置变量吗？
-
我现在将此问题与当前状态保持同步
-
现在似乎应该在组件中，而不是控制器/视图。
标签： ember.js breadcrumbs ember-router