How to observe adding element to array

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?

Amareswar · Accepted Answer · 2012-02-29 01:02:18Z

24

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

answered Feb 29, 2012 at 1:02

Amareswar

2,0641 gold badge21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matthew Boston Over a year ago

you can also observes('array.length')

Aravind Over a year ago

Seems over-kill to use a library to want to do this task. I'm curious: Isn't there a vanilla js way to do the same?

Adam Knights Over a year ago

As of Ember 2.0 you would use 'array.[]'

Christopher Manning · Accepted Answer · 2013-03-07 18:09:03Z

You can use Ember.ArrayController and overwrite the arrayDidChange function And optionaly call other methods from ther.

<!-- library load -->
<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 = Ember.ArrayController.create({
    content: [{foo:1}, {foo:2}, {foo:3}],
    addElement: function() {
      console.log(this);
      var array = this.get('content')
      array.pushObject({foo:4});
      // this.set('array', array);
    },
    elementAdded: function() {
      console.log('ok'); // not invoked...
    }.observes('array'),

    arrayDidChange: function(item, idx, removedCnt, addedCnt) {
      this.elementAdded();
      this._super(item, idx, removedCnt, addedCnt);
    }
  });
</script>

And you can use Observers

Ido Ran · Accepted Answer · 2012-10-12 10:07:05Z

3

Check out this fiddle to see how to know exactly what object has been added or removed from the array using ArrayController.

answered Oct 12, 2012 at 10:07

Ido Ran

11.5k22 gold badges96 silver badges158 bronze badges

Collectives™ on Stack Overflow

How to observe adding element to array

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related