ember.js 集合视图中特定于项目的操作 [英] item-specific actions in ember.js collection views

问题描述

我刚刚开始尝试使用 ember.js 库来了解它的全部内容.我想显示一个数据表，在每一行的右侧，有一个删除按钮来从表中删除该项目.我不知道如何做到这一点.

I'm just starting to play around with the ember.js library to see what it's all about. I want to display a table of data, and to the right of each row, have a delete button to delete that item from the table. I have no idea how to do this though.

注意，我还尝试创建一个子视图 (ItemView) 并在 {{#each ...}}...{{/each}} 部分内联使用它，但是 ember.js 抱怨期望一个视图类而不是 ItemView，即使 ItemView 是使用 Ember.View.create 定义的.我也想知道为什么这不起作用.即使在文档中的 #each 块中使用子视图的示例代码也不起作用.

Note, I also tried to create a child view (ItemView) and use it inline within the {{#each ...}}...{{/each}} section, but ember.js complains about expecting a view class instead of ItemView, even though ItemView is defined using Ember.View.create. I would also like to know why that isn't working. Even the sample code for using a child view in an #each block in the documentation doesn't work.

即使我可以声明一个名为 ItemView 的子视图来呈现每个单独的 Item，我仍然不知道如何获取该特定视图的 removeItem 操作以知道要从 itemsController 集合中删除哪个项目.是否有View的属性可以取回集合中子视图绑定的Item实例?

Even if I could declare a child view called ItemView to render each individual Item, I still wouldn't know how to get that particular view's removeItem action to know which item to remove from the itemsController collection. Is there a property of the View to get back the Item instance that the child view is bound to in a collection?

这是我的视图模板中包含列表的部分:

Here is the part of my view template that has the list:

{{#each App.itemsController}}
            <tr>
              <td>{{itemName}}</td>
              <td><a href="#" {{action "removeItem" on="click"}}>Delete</a></td>
            </tr>
{{/each}}

这是我的 javascript:

And here is my javascript:

window.App = Ember.Application.create();

window.App.Item = Ember.Object.extend({
    itemName: "defaultItemName"
});

window.App.itemsController = Ember.ArrayProxy.create({
    content: []
});

window.App.ListView = Ember.View.create({
    templateName: 'listView',

    removeItem: function (event) {
        // ??? How do I figure out what item
        // the user wanted to remove?
    }
});

推荐答案

Yehuda's post Michael links to 演示了正确的方法，在 each 中使用子 ItemView.不确定为什么这对您不起作用，不幸的是，您已从问题中删除了那段代码.

Yehuda's post Michael linked to demonstrates the correct approach, using a child ItemView inside the each. Not sure why that didn't work for you, you've removed that bit of code from your question unfortunately.

Yehuda 的答案中的某些语法有些过时，因此我对其进行了更新并将其更改为更像您的问题.你可以在这里查看:http://jsfiddle.net/wmarbut/67GQb/130/ (更新链接到 jsfiddle 1/21/12)

Some of the syntax in Yehuda's answer is slightly out of date so I've updated it and changed it to be a bit more like your question. You can check it out here: http://jsfiddle.net/wmarbut/67GQb/130/ (updated link to jsfiddle 1/21/12)

它的推力是

把手

{{#each App.peopleController}}
    {{#view App.PersonView personBinding="this"}}
        <td>{{view.person.fullName}}</td>
        <td><button {{action removeItem target="view"}}>Delete</button>
    {{/view}}
{{/each}}

Javascript

App.PersonView = Ember.View.extend({
    tagName: 'tr',
    person: null,
    removeItem: function() {
        var person = this.get('person');
        App.peopleController.removeObject(person);
    }
});

这篇关于ember.js 集合视图中特定于项目的操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！