Finding Current Route and Creating Breadcrumbs with ui-navigator-service

Published on Nov 25, 2015

Finding the current route name and doing cool stuff with it has become less difficult than it once was... and ui-navigator-service makes it even easier!

In this episode we use ui-navigator-service to create “breadcrumbs”, a series of links at the top of our page that shows our current route hierarchy.


Links

Code

Using the navigator to define the breadcrumbs array in applicationt/controller.js:

import Ember from 'ember';

export default Ember.Controller.extend({
  navigator: Ember.inject.service(),
  breadCrumbs: Ember.computed('navigator.currentPath', function(){
    var crumbs = this.get('navigator.currentPath').split('.');
    if(this.get('navigator.isIndexRoute')){
      crumbs.popObject() //get rid of the index route at end
    }
    var breadedCrumbs = crumbs.map(function(crumb, index){
      var path = crumbs.slice(0, index).join('.');
      return {
        path: path == '' ? 'index' : path,
        name: crumb
      }
    })
    return [{path: 'index', name: 'index'}].concat(breadedCrumbs)
  })
})

Displaying the breadcrumbs in the template:

{{#each breadCrumbs as |breadCrumb|}}
  {{#link-to breadCrumb.path}}{{breadCrumb.name}}{{/link-to}} /
{{/each}}

Transcript

So, you may have at times wondered how to get the route name in Ember, and this used to be really hard. Fortunately, it’s gotten easier with time. Currently you can just call currentRouteName in the application controller, but a new add-on makes it even easier. So it’s built off the currentRouteName method, but then he adds a bunch of convenience methods, such as checking whether it’s an indexRoute, getting the primaryRoute, so the thing at the base, and getting the currentNode, as well as offering a shorter way to call it currentPath instead of currentRouteName.

Getting started with it, this add-on, is really simple. You install it and now that service is in your app. To use this service, we’ll inject it onto one of our controllers. And then from within the template, we’ll call the currentPath. This gives us the full route, tags.tag.show. But this isn’t really good as a breadcrumb. We want them to be links and be able to be displayed a little bit differently. Let’s go ahead and do that now.

So to prepare for this, I had to change this tag route. It used to be a resource, but now it’s a route, because otherwise what we’re about to do wouldn’t have worked. So if you have nested resources and you want to do this technique, change them to routes. It’ll be a little bit of a pain, but this is where Ember is going anyways.

So our result that we want is an index route to the left here, and then a tags link and then a tag link and then a show link, and we’ll go ahead and put slashes between those. To make that happen, let’s create the template that we want, then we’ll create a data structure that can fill it. So we’ll loop through each of the breadcrumbs, and then we’ll link-to the breadcrumbs and we’ll give it a path, and then we’ll display the name. So we want a list of things, a list of objects, that have a path and a name.

So we’ll create that, the breadCrumbs property, on our controller. We’ll make it a computed property that depends on navigator.currentPath. And so first we’ll get navigator.currentPath and we’ll split it based on the periods, so it’ll be split into an array. And then, we’ll check to see if it’s the index route, and if it is the index route we’ll pop the last object which is the index because it’s going to be the same as the one above.

Next, we’ll return those breadcrumbs but we’re going to map them so that they’re an object. So the map function takes the crumb and the index, and we’ll use that index to get the path from the array of crumbs. And then we’ll return that path as well as the name.

So that gets us these links, and the links take us where we want to go. That’s pretty great. We also want an index link here, so let’s go ahead and add that.

We’ll go ahead and we’ll change this to setting a variable. We’ll call them breadedCrumbs. And then what we’ll return is we’ll take an array that just has the index pasted onto the beginning.

So now we have what we want. We have the index at the beginning of it and that of course links to our index.

Now this is all looking pretty great, but there are a few downsides to it. Number one being, let’s say you have a route, such as tag, that is kind of a dead route. It just passes through an outlet. In that case, you don’t really want to have it in there, but how to remove it is left as an exercise to the reader.

This particular implementation could also run into problems when you have unusual routes such as hat.bar.foo. It’s going to try to interpret this as three nested routes when it’s really just one.

A more robust breadcrumb implementation that is more than just five minutes of video, can be found at Ember-crumbly with this add-on. But the point is still that ui-navigator-service is really useful. I know that I’ve wanted to use something like this in the past and I’m glad it’s here for us now.

So that’s all for right now. I hope you’ll join us in the pro-episode this week when we talk more about Ember promises.

Subscribe to our mailing list