Question

这是我的模板：

<table id="locationDataTable" class="large-data-table" cellspacing='0' border='0'>

  <thead>
    <tr>
      <th>
        {{view App.LocationDataTable type='kwh'}}
      </th>
      <th>
        {{view App.LocationDataTable type='btu'}}
      </th>
    </tr>
  </thead>
  <tbody>
     ...
  </tbody>
</table>

这是我的观点JS：

App.LocationDataTable = Ember.View.extend({
  tagName: 'span',
  classNames: ['carrot'],
  classNameBindings: ['direction', 'isActive:active'],
  direction: 'down',
  isActive: false,

  click: function(){

    // remove active class from all #locationDataTable span

    this.set('isActive', true);  // set active only on this one

    var type = this.get('type');
    this.get('controller').set('sortProperties', [type]);

    if (this.get('direction') === 'up') {
      this.set('direction', 'down');
      this.get('controller').set('sortAscending', true);
    } else {
      this.set('direction', 'up');
      this.get('controller').set('sortAscending', false);
    }
  }
});

我不知道我是否以最佳方式执行此操作...我之前尝试过使用{{action 'sortTable'}}之类的动作助手并遇到类似问题...我可以为每个元素设置不同的视图js，但是如何，我将如何从所有这些中删除活动类？

如果我没有解释好自己，请告诉我。

Answer 1

我猜你有某种ArrayController来管理你的对象列表。也许像App.LocationsController这样的东西。这样的事情应该有效。

App.LocationsController = Ember.ArrayController.extend({
  selectNone : function(){
    this.get('content').forEach(function(location){
      location.set('isActive',false); 
    });
  }
});

App.LocationDataTableController = Ember.Controller.extend({
  needs : ['locations']
});

App.LocationDataTable = Ember.View.extend({
  // your other stuff here...
  click: function(){

    // remove active class from all #locationDataTable span
    this.get('controller.controllers.locations').selectNone();

    this.set('isActive', true);  // set active only on this one

    // your other stuff here...
  }
});

如何从一堆视图中删除一个类？

1 个答案: