Removing Classnames From Ember View

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','na

Solution 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

Solution 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']);
  }
});