Question

I want to observe adding element to array.
below is test program.

<!-- library load -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.min.js"></script>

<script type="text/x-handlebars">
  {{#each App.ArrayController.array}}
    {{foo}}
  {{/each}}
  <button onclick="App.ArrayController.addElement();">add</button>
</script>
<script type="text/javascript">
  var App = Em.Application.create();
  App.ArrayController = Em.Object.create({
    array: [{foo:1}, {foo:2}, {foo:3}],
    addElement: function() {
      this.array.pushObject({foo:4});
    },
    elementAdded: function() {
      alert('ok'); // not invoked...
    }.observes('array')
  })
</script>  

But when call addElement, elementAdded is not invoked…
How do I observe adding element?

Answer 1

use observes(‘array.@each’) instead. jsfiddle code is here