Shared state in Ember component

Question

I was trying to build a simple list with append widget as an Emberjs component.

The following is the code I used:

HTML:

Answer 1

After you declare the component, each time you use it in your template a new instance will be created, and most importantly the init hook will also be called every time a new instance is instantiated, therefore the most secure way to have different myList arrays would be to use the component init hook, to initialize the array, so try the following:

App.AppendableListComponent = Ember.Component.extend({
  myList: null,
  init: function(){
    this._super();
    this.set('myList', Ember.ArrayProxy.create({content: []}));
  },
  actions: {
    append: function(){
      var newItem = this.get('newItem');
      this.get('myList').pushObject(newItem);
    }
  }
});

Also important is to call this._super(); inside init and everything will work as expected.

See here for a working demo.

Hope it helps.

Answer 2

When you use extend(hash) any value present in the hash, will be copied to any created instance. And because array is a object, your reference will be the same across the created objects:

App.MyObject = Ember.Object.extend({ text: [] });

obj1 = App.MyObject.create();
obj2 = App.MyObject.create();

obj1.get('text') === obj2.get('text') // true

obj1.get('text').pushObject('lorem');
obj1.get('text'); // ["lorem"]

obj2.get('text').pushObject('ipsum');
obj2.get('text'); // ["lorem", "ipsum"]

The didInsertElement is called for each new view created, and each view is a diferent instance. So with your implementation you always will have a new Ember.ArrayProxy instance for each view, then no shared state exist:

didInsertElement: function() {
    // each call for this method have a diferent instance
    this.set('myList', Ember.ArrayProxy.create({content: []}));
}