Implementation of displaying breadcrumb path in ember with sample code or may be direct me to some repository

Question

Can some one redirect me to some project code or some working example of displaying crumble path in ember?

This code doesn't work for some reason.

    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');
   }   

  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() {}
    });
}
   });

Answer 1

Here you have a starting point:

APP.Breadcrumb = Em.View.extend({
  classNames: ['breadcrumb'],
  tagName: 'ul',

  activeChanged: function () {
    var self = this;
    Em.run.next(this, function () {
        self.set('active', self.get('childViews.firstObject.active'));
    });
  }.observes('childViews.firstObject.active'),

  disabled: function () {
    var role = this.get('role');
    if (!Em.isEmpty(role)) {
        return !this.get('controller.controllers.login').hasRole(role);
    }
    return false;
  }.property("controller.controllers.login.authenticationMediator.roles.@each"),

  currentPathChanged: function() {
    this.rerender();
  }.observes('controller.currentPath'),

  template: function () {
    var template = [],
        controller = this.get('controller'),
        router = controller.container.lookup('router:main'),
        currentHandlerInfos = router.get('router.currentHandlerInfos');

    for (var i = 0; i < currentHandlerInfos.length; i++) {
        var name = Em.get(currentHandlerInfos[i], 'name');

        if (!(router.hasRoute(name) || router.hasRoute(name + '.index')) || name.endsWith('.index')) {
            continue;
        }

        var notLast = i < currentHandlerInfos.length - 1 && !Em.get(currentHandlerInfos[i + 1], 'name').endsWith('.index');

        template.push('<li' + (notLast ? '>' : ' class="active">'));
        if (notLast) {
            template.push('{{#linkTo "' + name + '"}}');
        }
        template.push(name);
        if (notLast) {
            template.push('{{/linkTo}}');
        }

        if (notLast) {
            template.push('<span class="divider">/</span>');
        }

        template.push('</li>');
    }

    return Em.Handlebars.compile(template.join("\n"));
  }.property('controller.currentPath')  
});