Ember component properties not acting isolated

Question

I'm having an issue understanding the expected Ember.Component isolation behavior. It is my understanding that rendering multiple instances of the same component should not result in properties being shared between the components.

I am seeing the opposite behavior, where updating a property on a component (from within the component itself) updates that same property on the other instances of that component that are currently rendered on the page.

Here is an example of the issue: http://jsbin.com/naworoyimoto/1/edit

Is this a bug or am I misunderstanding how isolation works in Ember.Component?

Answer 1

I think youre experiencing the funny nature of JavaScript object references. I ran into exactly this issue a while back, and it turned out because I was defining arrays on properties in the class definition, it was causing all instances of that class to reference the same array object.

The way I usually get around this problem is by setting the properties I want to be arrays as null, then in the init method I set the arrays. This makes sure that each instance creates its own array, instead of sharing an array reference with other instances!

Here's my fork of your jsbin example with my fix applied: http://jsbin.com/xulidefikuyu/1/