Removing Classnames from Ember view

Question

I am trying to create view that has functionality described in a view in am extending, but with different class names. What is happening is the ExpTypesView classes are ['nav','nav-pills'] and ['nav','nav-tabs']. How do i set it so they replace the classnames set in NavView?

Resume.NavView = Em.View.extend({
  tagName: 'ul',
  classNames: ['nav','nav-tabs'],
  currentPathDidChange: function(){
    Ember.run.next( this, function() {
      $("ul li:has(>a.active)").addClass('active');
      $("ul li:not(:has(>a.active))").removeClass('active');
   }); 
  }.observes('controller.currentPath')
});
Resume.ExpTypesView = Resume.NavView.extend({
  classNames:['nav','nav-pills']
});

Answer 1

In an Ember.View, classNames is a concatenated property so properties that you add will be concatenated with the super class values.

You can use classNameBindings to set the type in both the super class and the descendant.

App.NavView = Em.View.extend({
  tagName: 'ul',
  classNames: ['nav'],
  classNameBindings: ['type'],
  type: 'nav-tabs',
  currentPathDidChange: function(){
    Ember.run.next( this, function() {
      $("ul li:has(>a.active)").addClass('active');
      $("ul li:not(:has(>a.active))").removeClass('active');
   }); 
  }.observes('controller.currentPath')
});

App.ExpTypesView = App.NavView.extend({
  type: 'nav-pills',
});

This makes the classes class="ember-view nav nav-tabs" and class="ember-view nav nav-pills".

JSBin example

Answer 2

This dirty little workaround is giving me what I want, but if you know a better way or any resource that explains this please let me know!

Resume.ExpTypesView = Resume.NavView.extend({
  //classNames:['nav','nav-pills'],
  init: function(){
    this.set('classNames', ['nav','nav-pills']);
  }
});