Ember.js Navigation Controller - am I on the right path?

Question

I'm currently building a reporting platform for internal use and decided to use Ember.js. So far it's been both a good and bad experience; the bad is mostly related to the documentation and how most things I've researched online have changed with the latest revisions of ember.

We are using twitter bootstrap and the navigation portion of bootstrap has the active class on the li element instead of the a element. Naturally my first inclination was to just use jquery as a hack and just change the active class manually which felt totally wrong and decided to find the 'right' way.

So I ended up building a custom view for the navigation, see below: (note: I am using browserify)

// NavigationView.js
module.exports = Ember.View.create({
    templateName: 'navbar',

    // Bind the 'selected' property on this view to the controllers 'selected' property.
    selectedBinding: 'AnalyticsApp.NavigationController.selected',

    // a single sub item for the nav
    NavViewElement: Ember.View.extend({

      // Change the tag name to be a LI tag since bootstrap requires active class
      // to exist on that, instead of the default (ember) anchor tag when using {{linkTo}}
      tagName: 'li',

      // Bind the 'active' class to the computed property; checking if this nav
      // element is the current active tab.
      classNameBindings: ['isActive:active'],

      // This computed property will check if this nav item is active
      isActive: function() {
          return this.get('item') === this.get('parentView.selected');
      }.property('item', 'parentView.selected')

   })
});

Now, setting up the view was pretty straight forward, to use it to render a nav element I can use this:

{{#view view.NavViewElement item="network" }}
    {{#linkTo 'network'}}
        <i class="icon-sitemap"></i>
        <span>Networks</span>
    {{/linkTo}}
{{/view}}

In all the routes in the setupController method I am setting the 'selected' tab like so

AnalyticsApp.NavigationController.set('selected', 'network');

Now here is where I am unsure regarding my implementation and I would really appreciate if someone could tell me if I'm way off target or if I am on the right path.

I am using the NavigationController (below) to be the central store for the navigation logic, it is actually an ObjectController that I've extended and chained .create() on.

AnalyticsApp.NavigationController = Ember.ObjectController.extend({
  selected: null
}).create();

I tried extending a standard controller, but that doesn't expose the set / get methods. Is using an ObjectController for this type of setup the right type?

Thanks for taking the time to read, and I appreciate any and all feedback.

-Ryan S.

Since your NavigationController is used app wide, have tried just creating the controller like so AnalyticsApp.NavigationController = Ember.ObjectController.create({selected:null});? Does it then expose the set & get methods? — intuitivepixel
Yep, that does actually work, thanks! Wasn't aware I could just run create without extending. — Ryan Smith
There is a difference dough, if you use extend on the controller all instances that will be created will have the selected property on it, with create just the instance you are creating. — intuitivepixel
I know this is an old question, but how did your NavigationController become aware of changes to the selection as to update the selected property? — d2kagw
@d2kagw each route in the application that needs to update the nav has a setupController function that I'm setting the selected tab within: AnalyticsApp.NavigationController.set('selected', 'index'); — Ryan Smith

intuitivepixel intuitivepixel · Accepted Answer · 2013-05-17T20:52:28

Since my comment was usefull, I'll convert it to an answer. So, since your NavigationController is used app wide, try just to create the controller like so:

AnalyticsApp.NavigationController = Ember.ObjectController.create({selected:null});

Hope it helps

Ember.js Navigation Controller - am I on the right path?

1 Answers