ember.js - 如何在 Ember JS 中向对象数组添加/删除类

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：对不起我的英语，对不起格式。

score 0 · Accepted Answer

一种方法是将“isHover”属性移动到“todo”项，以便您可以搜索控制器中的所有“todo”项，并设置/取消设置它们的“isHover”属性：

改名：
```
App.ViewTable 
```
到
```
App.TableView
```
Ember 在名称末尾查找关键字“View”。
为每个语句中的项目添加名称（我使用“事物”）：
```
{{#each thing in App.todoListController}}
```
代替：
```
{{#each App.todoListController}}
```
这样以后更容易参考。
使用您在上面定义的名称（在这种情况下为事物）进行绑定（并删除引号）：
```
{{#view App.TableView todoBinding=thing}}
```
代替：
```
{{#view App.ViewTable todoBinding="this"}}
```
现在您的 tableView 将引用它正在显示的“待办事项”

将“isHover”移动到 Todo 项目的对象中：

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

在表格视图中绑定“isHover”：

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

现在将您的“点击”功能更改为：

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/amidunited/kY4nh/

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

ember.js - 如何在 Ember JS 中向对象数组添加/删除类

1 回答 1

Related

Reference