item-specific actions in ember.js collection views

Question

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 butto

Answer 1

Thanks to Tom Whatmore fiddle I found answer to the same question.

After reading trek intro, instead of personBinding="this", I'd rather use {{action removeItem person}} to explicitly indicate object on which action should 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'd use var person = evt.context; to get 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 2

Not sure if this the best way but I've put the item index or item name as a property of the tag and then use jQuery to fetch 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.

Answer 3

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