从 Ember 视图中删除类名答案

【问题标题】：Removing Classnames from Ember view从 Ember 视图中删除类名
【发布时间】：2013-05-12 21:14:09
【问题描述】：

我正在尝试创建具有正在扩展的视图中描述的功能的视图，但具有不同的类名。发生的事情是 ExpTypesView 类是 ['nav','nav-pills'] 和 ['nav','nav-tabs']。如何设置它以便它们替换 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']
});

【问题讨论】：

标签： javascript inheritance ember.js view extends

【解决方案1】：

在Ember.View 中，classNames 是concatenated property，因此您添加的属性将与超类值连接。

您可以使用classNameBindings 来设置超类和后代中的类型。

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

这使得类class="ember-view nav nav-tabs" 和class="ember-view nav nav-pills"。

JSBin example

【讨论】：

【解决方案2】：

这个肮脏的小解决方法给了我想要的东西，但如果你知道更好的方法或任何解释这一点的资源，请告诉我！

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

【讨论】：