Ember : Observes changes made to an input helper with an array of data

Question

I have an array of object. I am iterating on it in my template (through #each) and i print an input for each item.

How could i observes changes made to any items of that array ?

Here is the problem : JSBin

Answer 1

one way would be to add an observer in your App.IndexController, like this:

App.IndexController = Ember.ObjectController.extend({
  listBinding: 'model.val'

  listContentChanged: function() {
    // here the code, but, you won't know which one changed
  }.observes('list.@each.content')
});

other way would be to create another controller to represent each of the elements in list:

App.MyController = Ember.ObjectController.extend({
  contentChanged: function() {
    // and here, you can access 'content', content will be each of
    //the objects in the list array
  }.observes('content.content')//we're observing 'content.content',
   //the first one is the content of this controller, which is one
   //of the elements of the list array, and the second 'content'
   //would be the property you defined in each of the objects when you created them
});

and then, you would need to change the loop in your template, to something like this:

{{#each l in list itemController="my"}}
  {{input value=l.content.content}}
{{/each}}

itemController="my" specifies that each element in the array will create an instance of MyController.

Hope this helps.