ember.js集合视图中特定于项目的操作

我刚刚开始使用ember.js库来查看它的全部内容.我想显示一个数据表,并在每行的右侧有一个删除按钮,从表中删除该项.我不知道怎么做.

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

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

以下是我的视图模板中包含列表的部分：

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

这是我的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的帖子Michael链接到演示正确的方法,在每个内部使用子ItemView.不确定为什么这对你不起作用,不幸的是你从你的问题中删除了那段代码.

Yehuda的答案中的一些语法略有过时,所以我更新了它并将其更改为更像你的问题.你可以在这里查看：http://jsfiddle.net/wmarbut/67GQb/130/(更新链接到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);
    }
});

原文地址：https://www.jb51.cc/js/159630.html