Question

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

注意，我还尝试创建子视图（ItemView）并在{{#each ...}} ... {{/ each}}部分内联使用它，但是ember.js抱怨期待尽管使用Ember.View.create定义了ItemView，但是查看类而不是ItemView。我也想知道为什么这不起作用。甚至在文档中的#each块中使用子视图的示例代码也不起作用。

即使我可以声明一个名为ItemView的子视图来呈现每个单独的Item，我仍然不知道如何获取该特定视图的removeItem动作以知道要从itemsController集合中删除哪个项目。是否有一个属性可以取回子视图在集合中绑定的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?
    }
});

Answer 1

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);
    }
});

Answer 2

感谢Tom Whatmore小提琴，我找到了同样问题的答案。

在阅读trek intro而不是personBinding="this"后，我宁愿使用{{action removeItem person}}明确指出应该执行哪些操作的对象。

<script type="text/x-handlebars">
<table>
    {{#each person in App.peopleController}}
        {{#view App.PersonView}}
            <td>{{person.fullName}}</td>
            <td><button {{action removeItem person}}>Delete</button>
        {{/view}}
    {{/each}}
</table>
</script>

在视图中，我使用var person = evt.context;来获取人物对象。

App = Ember.Application.create();

App.Person = Ember.Object.extend({
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
});

App.peopleController = Ember.ArrayProxy.create({
    content: [App.Person.create({ firstName: "Yehuda", lastName: "Katz" }),
    App.Person.create({ firstName: "Tom", lastName: "Dale" })]
});

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

你可以玩这个小提琴jsfiddle.net/67GQb/127

Answer 3

不确定这是否是最佳方式，但我将项目索引或项目名称作为标记的属性，然后使用jQuery来获取它。

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


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

    removeItem: function (event) {
        var id = this.$().parent().parent().attr('itemName');
        ...
    }
});

希望这有帮助。

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

3 个答案: