Ember : How to update a single field in an array of JSON objects in a controller?

Question

How can I update Einstein's score to a 100 in the controller?

In a controller, I have an array of JSON objects like :

items = [
         {title:"John", score:24},
         {title:"Einstein", score:2},
         {title:"Mary", score:19}
        ];

This is rendered in the template using component like this :

{{#each items as |item|}}
  {{some-child-component scoreVal=item.score}}
{{/each}}

What should I do to update Einstein's score to a 100? I just want to change that particular field and have it reflect in the app.

I want to avoid replacing the entire array with a new (almost same one), because that causes a refresh for all components in the template.

[FAILED] I tried using :

var allItems = this.get('items');
allItems[1]['score'] = 100; //ERROR

Also

   this.set('items[1][score]',100); //ERROR

Answer 1

Where exactly are you trying to set the score to 100?

If you make your items Ember objects

items = [
         {title:"John", score:24},
         {title:"Einstein", score:2},
         {title:"Mary", score:19}
        ].map(function(item) { return Ember.Object.create(item) });

you will be able to use the setter as items[1].set('score', 100)

Answer 2

I discovered the Ember way of doing this:

var elem = items.objectAt(1);
Ember.set(elem, 'score', 100);

Answer 3

You could use .findBy to find the record and give it a new value.

If you aren't using Ember Data for your data layer then I would also make the array of objects Ember Objects so you can use .get and .set to update the attributes.

Here's a full JSBin of what you're trying to accomplish.