我想用 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}}到路由中，我试图让它动态化，就像这里一样，但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这种方法时，它将不再起作用。