Я хочу показать путь раскалывания с 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
, вывод для панировок: (я удалил все script -tag placeholders
<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
, этот метод больше не будет работать.