Creating the Bootstrap Nav in Ember

The standard Bootstrap Navigation includes a list of items and whichever item has the class of active is given a grey background to indicate it is the selected/active item in the navigation. Creating this navigation with Ember came to be a bit of a struggle, but behold I found a fix in the Ember.js github issues section with a solution.

The HTML code for the nav:

{{#link-li}}
{{#link-to ‘local’}}
Local
{{/link-to}}
{{/link-li}}

Some Javascript needs to be added to create the linkli component which handles assigning the class active to the current page/nav item.

App.LinkLiComponent = Em.Component.extend({
tagName: ‘li’,
classNameBindings: [‘active’],
active: function() {
return this.get(‘childViews’).anyBy(‘active’);
}.property(‘childViews.@each.active’)
});

Leave a Reply

Your email address will not be published. Required fields are marked *