从 Ember 视图中删除类名

Posted

技术标签:

【中文标题】从 Ember 视图中删除类名【英文标题】:Removing Classnames from Ember view 【发布时间】: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']
);

【问题讨论】:

【参考方案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']);
  
);

【讨论】:

以上是关于从 Ember 视图中删除类名的主要内容,如果未能解决你的问题,请参考以下文章

在 ember 中,如何将视图数据从拖放中传递?

ember.js 从另一个视图更改视图

Ember.js 路由器:如何动画状态转换

如何在 Ember 中(重新)渲染视图模板时收到通知?

使用 Ember.js,如何在渲染视图后运行一些 JS?

Ember - 在视图中显示模型数据