title: Display crumble path with ember
body: <p>I want to display a crumble path with Ember. How can I iterate through the current path?</p>
  
  <p>In my opinion there are two approaches:</p>
  
  <p><em><strong>The ember-way</em></strong></p>
  
  <p><em>EDIT: see my answer below</em></p>
  
  <p>I keep this question up-to-date with the current status of displaying breadcrumbs. You can browse through the revisions of this question to see the history.</p>
  
  <p>There are a couple of goals here:</p>
  
  <ol>
  <li>Listen on route change</li>
  <li>Finding current route</li>
  <li>displaying list of the current route</li>
  <li>display working links to the steps in the route</li>
  </ol>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>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({});
  </code></pre>
  
  <p><strong>Router</strong></p>
  
  <pre><code>App.ApplicationRoute = Ember.Route.extend({
      renderTemplate: function() {
          this.render();
          this.render('breadcrumbs', {
              outlet: 'breadcrumbs',
              into: 'application',
              controller: this.controllerFor('breadcrumbs')
          });
      }
  });
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>{{! application template }}
  &lt;div class="clearfix" id="content"&gt;
      {{outlet "breadcrumbs"}}
      {{outlet}}
  &lt;/div&gt;
  
  {{! breadcrumbs template }}
  &lt;ul class="breadcrumb"&gt;
    {{#each link in content}}
      &lt;li&gt;
        &lt;a {{bindAttr href="link.name"}}&gt;{{link.name}}&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
      &lt;/li&gt;
    {{/each}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>The current problems to tackle are:</p>
  
  <ul>
  <li>When I go to the URL: <code>#/websites/8/pages/1</code> the output for the breadcrumbs is: (I removed all the script-tag placeholders</li>
  </ul>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="breadcrumb"&gt;
    &lt;li&gt;
      &lt;a href="application" data-bindattr-34="34"&gt;application&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href="sites" data-bindattr-35="35"&gt;sites&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="site" data-bindattr-36="36"&gt;site&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="pages" data-bindattr-37="37"&gt;pages&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="page" data-bindattr-38="38"&gt;page&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="page.index" data-bindattr-39="39"&gt;page.index&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <ul>
  <li>The URL's should be a valid route</li>
  <li>The menu is now hardcoded with <code>{{#linkTo}}</code> to the routes, I tried to make that dynamic, like <a href="http://jsfiddle.net/Malkyne/ydTWZ/">here</a> but a <code>transitionTo</code> doesn't trigger the <code>currentPath</code>-observer</li>
  </ul>
  
  <p><em><strong>The other way</em></strong></p>
  
  <p>Most is the same as above, but there are a couple of differences. The breadcrumbs are made by looping over <code>location.hash</code> instead of getting it from the Router. </p>
  
  <p>The <strong>ApplicationController</strong> becomes:</p>
  
  <pre><code>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');
  }
  </code></pre>
  
  <p>We need to subscribe the custom handler in the <strong>ApplicationRoute</strong></p>
  
  <pre><code>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() {}
          });
      }
  });
  </code></pre>
  
  <p>So far the alternative approach is working best for me, but it's not a good way of doing it because when you configure your Router to use the <code>history</code> instead of <code>location.hash</code> this method won't work anymore.</p>