Ответ 1

Основываясь на вашем текущем выпуске breadcrumb, я думаю, у вас есть ошибка в вашем маршрутизаторе.

Следующая команда должна возвращать массив с текущей парой:

App.get('Router.router.currentHandlerInfos');

Ваш маршрутизатор должен быть вложен:

this.resource('page 1', function () {
    this.resource('page 2');
});

Вы можете использовать #linkTo вместо тега a в своей паре, вы получите активный класс бесплатно.

Ответ 2

Я придумал гораздо более простое решение, которое я разместил в Ember discourse.

Ответ 3

Я нашел решение (Ember-way) для отображения панировочных сухарей. Он основан на маршрутизаторе вместо моего location.hash.

Инфраструктура

Сначала нам нужно создать инфраструктуру для панировочных сухарей, прежде чем добавлять или удалять элементы из массива breadcrumbs.

Меню

В моем app.js я определяю a NavItem -объект. Это скелет для всех навигационных элементов. Я использую его для определения моих пунктов меню, но мы также будем использовать его для панировочных сухарей.

App.NavItem = Em.Object.extend({
    displayText: '',
    routeName: ''
});
// define toplevel menu-items
App.dashboardMenuItem = App.NavItem.create({
    displayText: 'Dashboard',
    routePath: 'dashboard',
    routeName: 'dashboard'
});
App.sitesMenuItem = App.NavItem.create({
    displayText: 'Websites',
    routePath: 'sites.index',
    routeName: 'sites'
});

Контроллеры

Нам нужен BreadcrumbsController, чтобы держать панировочные сундуки в центральном месте

App.BreadcrumbsController = Em.ArrayController.extend({
    content: []
});

Мой ApplicationController зависит от BreadcrumbsController

App.ApplicationController = Ember.Controller.extend({
    needs: ['breadcrumbs']
});

BreadcrumbsView - это подпрограмма ApplicationView

представления

App.ApplicationView = Ember.View.extend({
    BreadcrumbsView: Ember.View.extend({
        templateName: 'breadcrumbs',

        init: function() {
            this._super();
            this.set('controller', this.get('parentView.controller.controllers.breadcrumbs'));
        },
        gotoRoute: function(e) {
            this.get('controller').transitionToRoute(e.routePath);
        },

        BreadcrumbItemView: Em.View.extend({
            templateName:'breadcrumb-item',
            tagName: 'li'
        })
    })
});

Шаблоны

В моем приложении -template я вывожу представление с паникой над розеткой

{{view view.BreadcrumbsView}}
{{outlet}}

Я использую Twitter Bootstrap, поэтому моя разметка для моей панировки -template

<ul class="breadcrumb">
  {{#each item in controller.content}}
      {{view view.BreadcrumbItemView itemBinding="item"}}
  {{/each}}
</ul>

патч-элемент -template

<a href="#" {{action gotoRoute item on="click" target="view.parentView"}}>
  {{item.displayText}}
</a> <span class="divider">/</span>

Routing

Нам нужно ответить на маршрутизацию в нашем приложении, чтобы обновить панировочные сухари.

Когда мой SitesRoute (или любой другой маршрут верхнего уровня) активируется, мы нажимаем NavItem на Breadcrumbs, но я также хочу сделать это с остальными моими путями верхнего уровня, поэтому я сначала создаю a TopRoute

App.TopRoute = Em.Route.extend({
    activate: function() {
        this.controllerFor('menu').setActiveModule(this.get('routeName'));
        var menuItem = app.menuItems.findProperty('routeName',this.get('routeName'));
        this.controllerFor('breadcrumbs').get('content').pushObject(menuItem);
    },
    deactivate: function() {
        var menuItem = app.menuItems.findProperty('routeName',this.get('routeName'));
        this.controllerFor('breadcrumbs').get('content').removeObject(menuItem);
    }
});

Все мои пропуски простираются от этого маршрута, поэтому панировочные сухари автоматически обновляются

App.SitesRoute = App.TopRoute.extend();

Для более глубоких уровней он работает почти так же, все, что вам нужно сделать, это использовать крюки activate и deactivate для push/remove объектов из Breadcrumbs

App.SiteRoute = Em.Route.extend({
    activate: function() {
        var site = this.modelFor('site');
        this.controllerFor('breadcrumbs').get('content').pushObject(app.NavItem.create({
            displayText: site.get('name'),
            routePath: 'site',
            routeName: this.get('routeName')
        }));
    },
    deactivate: function() {
        var site = this.modelFor('site');
        this.controllerFor('breadcrumbs').get('content').removeAt(1);   
    }
});