Playing with Ember.Object.reopen(), why I have those results?

Question

I was trying to answer this question: emberjs: add routes after app initialize()

I started to play with Ember.Object.reopen(), to understand how it works, and perhaps finding a way of answering the previous question.

I feel a bit puzzled, and don't understand the behavior of this code:

jsfiddle: http://jsfiddle.net/Sly7/FpJwT/

<script type="text/x-handlebars">
  <div>{{App.myObj.value}}</div>
  <div>{{App.myObj2.value}}</div>
  <div>{{App.myObj3.value}}</div>
</script>

App = Em.Application.create({});

App.MyObject = Em.Object.extend({value: 'initial'});

App.set('myObj', App.MyObject.create());

Em.run.later(function(){
  App.get('myObj').reopen({
    value: "reopenOnInstance"        
  }); // the template is not updated, 'initial' is still diplayed, but
  console.log(App.get('myObj').get('value')); // print 'reopenOnInstance'

  App.MyObject.reopen({
    value: "reopenOnClass"      
  });
  App.set('myObj2',App.MyObject.create()); // the template is updated and 
  console.log(App.get('myObj2').get('value')); //print 'reopenOnClass'

  App.myObj3 = App.MyObject.create(); // the template is not updated but
  console.log(App.myObj3.get('value')); // print 'reopenOnClass'

  Em.run.later(function(){
    App.get('myObj').set('value', "setWithSetter"); // the template is updated and
    console.log(App.get('myObj').get('value')); // print 'setWithSetter'

    App.get('myObj2').set('value', "setWithSetter"); // the template is updated and
    console.log(App.get('myObj2').get('value')); // print 'setWithSetter'

    App.myObj3.set('value', "setWithSetter"); // the template is not updated but
    console.log(App.myObj3.get('value')); // print 'setWithSetter'

  }, 2000);
},2000);

If someone can explain what is going on, particularly why the templates are sometimes not updated, sometimes updated, and also what's the difference between calling reopen on a class, calling it and on a instance.

Answer 1

Not 100% sure, but I will try and answer you questions.

First lets look at "myObj3". The ember getter/setter methods trigger the updates in the templates (they fire internal events which cause every property/observer to know something happened). Just setting a value by hand does update the value but will not fire these events and hence nothing changes in the UI. Kind of like when you use a Mutable list you use pushObject to make sure the UI updates.

Now lets look at your "reopen". When you reopen on the class it works as you would expect and updates the base class. When you reopen an instance it is actually creating a mixin and shims it on top of the object. This means when you do a "get" ember iterates over the mixin & object for the value to return. It finds that mixin and gets the value before the object; you could actually replace the method with a "return 'foo '+this._super()" on the instance you will get 'foo initial' (think of your object has having layers like an onion). If you have a group of mixin on top of your object you will have a hard time finding the correct value if you set something directly (but "get" will work perfectly). This leads to the general rule that you should always use "set" instead of a direct reference.

Side note: You can call "getPath" instead of "get" and you can use the relative or absolute path. Such as App.getPath('myObj2.value') which will make the code a little easier to manage. Goes for "setPath" also.

Lastly: The last value prints because you did change the value (it is in there) but the trigger for ember to update the ui never fired because you never called set on "myObj3" object.

EDIT: In the lastest version of ember it looks like the reopen on an instance does do a merge-down on the object (if that key already exists). The mixin only will wrap if you are adding new content.