Question

我尝试学习Ember JS。我找不到我的问题的答案。我有模板

<script type="text/x-handlebars">
      <table class="table">
         {{#each App.todoListController}}
            {{#view App.ViewTable todoBinding="this"}}
               <td>{{title}}</td>
           <td><a href="javascrpt:" {{action "deleteTodo" target="view"}}>X</a></td>
            {{/view}}
         {{/each}}
       </table>
       <button {{action "deleteTodo" target="App.todoListController"}}>Delete</button>
    </div>
</script>

在app.js中我有Controller和View：

/*******************
        Controller
*******************/
App.todoListController = Em.ArrayController.create({
    content : [],    
    createTodo : function(title) {
       var todo = App.Todo.create({title:title})
       this.pushObject(todo)
    }
});

/*******************
        View
*******************/
App.ViewTable = Em.View.extend({
    tagName : 'tr',
    classNameBindings : ['isHover:hover'],
    isHover : false,
    todo : null,
    deleteTodo : function(){
        var tr = this.get('todo');
        App.todoListController.removeObject(tr);
    },
    click : function()
    {
        this.set('isHover',true);
    }
})`

当我点击表格行时，它将类更改为“悬停”。现在提问：我无法从所有对象中删除类“悬停”（只需要选择一个对象）

PS：抱歉我的英文，对不起格式化。

Answer 1

这样做的一种方法是移动＆＃34; isHover＆＃34;属于＆＃34; todo＆＃34;项目，以便您可以搜索所有＆＃34; todo＆＃34;控制器中的项目，设置/取消设置＆＃34; isHover＆＃34;他们的财产：

重命名：
```
App.ViewTable 
```
到
```
App.TableView
```
Ember会查找关键字＆＃39;查看＆＃39;在名称的末尾。
为每个陈述中的项目添加一个名称（我使用＆＃34; thing＆＃34;）：
```
{{#each thing in App.todoListController}}
```
而不是：
```
{{#each App.todoListController}}
```
通过这种方式，以后可以更容易地进行参考。
使用您在上面定义的名称（在本例中为事物）进行绑定（并删除引号）：
```
{{#view App.TableView todoBinding=thing}}
```
而不是：
```
{{#view App.ViewTable todoBinding="this"}}
```
现在你的tableView将引用＆＃39; todo＆＃39;正在显示

移动＆＃34; isHover＆＃34;进入Todo项目的对象：

App.Todo = Em.Object.extend({
    title:"...",
    isHover: false
});

Bind＆＃34; isHover＆＃34;在您的表视图中：

....
tagName : 'tr',
isHoverBinding: 'this.todo.isHover',//this should be before your classNameBindings
classNameBindings : ['isHover:hover'],
...

现在更改您的点击＆＃39;功能：

click : function() {
     //Get a list of the other hovered items from the controller:
    var otherHoveredItems = App.todoListController.get('content').filterProperty('isHover', true);

    //Iterate each hovered item and set hover to false
    for ( var i = 0; i < otherHoveredItems.length; i++) {
        otherHoveredItems[i].set('isHover', false);
    }

    //set this item to hover
    this.get('todo').set('isHover', true);
}

这是一个小提琴示例：http://jsfiddle.net/amindunited/kY4nh/

另一种方法是将{{#each}}移动到collectionView中。把手{{each}}是一个集合视图，所以这不是一个大跳跃。需要注意的是，单独的click方法不会给你上下文，但是如果你将click函数包装在eventManager中，你将获得视图作为第二个引用...听起来很乱，但它是实际上更整洁：http://jsfiddle.net/amindunited/5hNSZ/

如何在Ember JS中添加/删除类到对象数组

1 个答案: