Question

I have an Ember application with both a view and a controller:

http://jsfiddle.net/gavriguy/EDr4G/

I want to mark the current item the user clicks as read – by changing it’s related model.
I’m currently able to do that by figuring the item’s index of the view – but the problem is that i can’t be sure that the index on the view is the same as the index on its controller.
Any thoughts?

JavaScript:

App.tempController = Em.ArrayController.create({
    content: [
        {
        title: 'A',
        unread: true},
    {
        title: 'B',
        unread: true},
    {
        title: 'C',
        unread: false}
    ]
});

App.someItemsView = Ember.CollectionView.create({
    contentBinding: 'App.tempController.content',
    itemViewClass: Ember.View.extend({
        template: Ember.Handlebars.compile('<div>{{content.title}} unread: {{content.unread}}</div>'),
        click: function(event) {
            //How to mark current clicked item as read?
            console.log(this.content);
            console.log(event);
            this.set('content.unread', false);
        }
    })
});​

Answer 1

Inside your click handler you can get the reference to the array item for which the view is rendered via this.get('content'). So you can set the flag via this.setPath('content.unread', false), see http://jsfiddle.net/pangratz666/t6Nst/:

itemViewClass: Ember.View.extend({
    template: Ember.Handlebars.compile('<div>{{content.title}} unread: {{content.unread}}</div>'),
    click: function(event) {
        // this.content is the item in the array on which this click event occures.
        this.setPath('content.unread', false);
    }
})