从Ember视图中删除类名 | 从Ember视图中删除类名

本文介绍了从Ember视图中删除类名的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图创建一个视图，该视图具有在扩展视图中描述的功能，但是具有不同的类名.发生的是ExpTypesView类是['nav'，'nav-pills'] 和 ['nav'，'nav-tabs'].如何设置它，以便它们替换在NavView中设置的类名?

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

推荐答案

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

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

您可以使用classNameBindings在超类和后代中设置类型.

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

这使类成为class="ember-view nav nav-tabs"和class="ember-view nav nav-pills".

JSBin示例

这篇关于从Ember视图中删除类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！