Actions of individual elements in ember.js collection views

Question

I'm just starting to play with the ember.js library to find out that's all. I want to display a data table, and to the right of each row is a delete button to remove this item from the table. I do not know how to do that.

Notice I also tried to create a child view (ItemView) and use it inside the {{#each ...}} ... {{/ each}} section, but ember.js complains about waiting for the view class instead of the ItemView, although the ItemView is defined using Ember.View.create. I would also like to know why this is not working. Even the sample code for using the child view in the #each block in the documentation does not work.

Even if I can declare a child ItemView to display each individual item, I still don’t know how to get this particular view removeItem action to find out which item to remove from the itemsController collection. Is there a view property to return an instance of the element to which the child view in the collection is bound?

Here is the part of my view template that has a 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? } }); 

Answer 1

Yehuda post Michael, associated with demonstrating the right approach, uses a child ItemView inside each of them. Not sure why this did not work for you, you, unfortunately, removed this bit of code from your question.

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

Thrust of this

Rudders

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

Thanks to Tom Kemmor's script I found the answer to the same question.

After reading the trek intro instead of personBinding="this" I would rather use {{action removeItem person}} to explicitly indicate the object on which the action is to be performed.

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

In the view, I would use var person = evt.context; to get the person object.

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

You can play with this fiddle jsfiddle.net/67GQb/127

Answer 3

Not sure if this is the best way, but I put the element index or element name as a tag property and then used jQuery to retrieve it.

 // 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'); ... } }); 

Hope this helps.