如何从emberjs中的其他元素中删除class

Question

我的函数在单击元素时切换 class 名称。但它不会从其他元素中删除 class 名称。所以现在所有的元素都是高亮的。但是每当用户点击一个元素时，它应该有 classname 其余的兄弟姐妹必须删除 classname 如何做到这一点？

这是我的尝试，但没有用：

import Ember from 'ember';

export default Ember.Component.extend({
    isSelected : false,
    deSelectOthers : function(){
        this.set( "isSelected", false ); //deselecting all before add the class to clicked element
    },

    actions : {
        selectCard : function(card) {
            this.deSelectOthers(); //de select others not works
            this.toggleProperty('isSelected'); // add class to this element only works. how to remove class from other element?
        }
    }
});

更新对于我的要求的错误描述，我深表歉意。我已经使用 jQuery 创建了需求 - 如何使用 emberjs 实现相同的需求？ Demo-Requirement

Answer 1

这是working twiddle

您需要维护 selectedIndex/value 并根据 selectedIndex/value 使用 if 检查更新 class。

application.hbs

<div class="parent">
  <ul>
  {{#each model as | temp index|}}
    <li class={{if (eq selectedIndex index) 'highlight' }} {{action 'changeSelectedIndex' index}}>{{temp}}</li>
 {{/each}}   
  </ul>
</div>

routes/application.js

import Ember from 'ember';
export default Ember.Route.extend({
  model(){
    return [1,2,3,4];
  }
});

controllers/application.js

import Ember from 'ember';
export default Ember.Controller.extend({  
  selectedIndex:undefined,
  actions:{
    changeSelectedIndex(index){
      this.set('selectedIndex',index);
    }
  }
});

您需要通过运行 ember install ember-truth-helpers

安装 ember-truth-helpers 插件

如何从emberjs中的其他元素中删除class

How to remove class from other elements in emberjs

ember.js