Question

I have an Ember.Button which should remove an element from an array. The button label is simply an X (for now).

I’d like to know the best way to store data for use by the button. If this was plain jquery I might use data-username. But what’s the best way to do this?

update
Use case for this question would be something like this:

{{#each App.recentUsersArray}}
    <li>
        {{#view App.RecentNameBtn contentBinding="this"}} {{content}} {{/view}}
        {{#view App.RecentNameDeleteBtn}}X{{/view}}
    </li>
{{/each}}

In the second view, I need a way to know which username the delete action should apply to.

Answer 1

Use the {{action}} helper, which passes the context as argument, see http://jsfiddle.net/zVd9g/. Note: in the upcoming Ember.js version the action helper only passes one argument so you would have to adapt your sources accordingly.

If you want to use your existing views, you could do a contentBinding="this" on the App.RecentNameDeleteBtn as you already did on the App.RecentNameBtn.

Handlebars:

<script type="text/x-handlebars" >
    {{#each App.arrayController}}
        <button {{action "showTweets" target="App.arrayController" }} >{{this}}</button>
        <button {{action "removeItem" target="App.arrayController" }}>x</button>
        <br/>            
    {{/each}}
</script>​

JavaScript:

App = Ember.Application.create({});

App.arrayController = Ember.ArrayProxy.create({
    content: [1, 2, 3, 4, 5, 6],
    removeItem: function(view, evt, item) {
        console.log('remove user %@'.fmt(item));
        this.removeObject(item);
    },
    showTweets: function(view, evt, item) {
        console.log('show tweets of user %@'.fmt(item));
    }
});​