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

问题描述

我刚刚开始玩ember.js库，看看它是怎么回事。我想显示一个数据表，在每一行的右边，都有一个删除按钮，从表中删除该项。我不知道如何做到这一点。

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

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

这是我的视图模板的一部分，具有列表：

  {{每个App.itemsController}} 
< tr> 
< td> {{itemName}}< / td> 
< td>< a href =＃{{actionremoveItemon =click}}>删除< / 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）{
 //如何确定用户想要删除的项目
 // 
} 
}）; 
  

解决方案

Yehuda的帖子Michael链接来演示正确的方法，使用一个孩子ItemView里面的每个。不知道为什么这不适合你，你已经从你的问题中删除了一些代码。不幸的是，

Yehuda答案中的一些语法略有不同日期，所以我更新了它，并将其更改为一个更像你的问题。您可以在这里查看： http://jsfiddle.net/wmarbut/67GQb/130/ （更新的链接到jsfiddle 1/21/12 ）

它的主旨是

Handlebars

  {{每个App.peopleController}} 
 {{＃ PersonView personBinding =this}} 
< td> {{view.person.fullName}}< / td> 
< td>< button {{action removeItem target =view}}>删除< / button> 
 {{/ view}} 
 {{/ each}} 
  

strong> Javascript

  App.PersonView = Ember.View.extend（{
 tagName：'tr '，
 person：null，
 removeItem：function（）{
 var person = this.get（'person'）; 
 App.peopleController.removeObject（person）; 
} 
}）; 
  

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.

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.

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

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 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.

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)

The thrust of it is

Handlebars

{{#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屋！