Carbon properties of components not acting isolated

Question

I had a problem understanding the expected isolation behavior of Ember.Component. I understand that rendering multiple instances of the same component should not result in sharing properties between components.

I see the opposite behavior when updating a property on a component (from the component itself) updates the same property in other instances of this component that are currently displayed on the page.

Here is an example of a problem: http://jsbin.com/naworoyimoto/1/edit

Is this a mistake or I don’t understand how isolation works in Ember.Component?

Answer 1

I think you are experiencing the ridiculous nature of JavaScript object references. I ran into this problem a while ago, and it turned out that I was defining arrays of properties in the class definition, this caused all instances of this class to refer to the same array object.

As usual, I get around this problem by setting the properties that I want to be arrays as null, then in the init method I defined arrays. This ensures that each instance creates its own array, instead of using the array reference with other instances!

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