Ember.js Property Observer Unusual Behavior

Question

I am experiencing a couple of unusual behaviors with a property observer for Ember. Please see this jfiddle for the code in action: http://jsfiddle.net/sBVtJ/3/

When an observer watches two properties, it will be fired twice when both properties are updated simultaneously.
When an observer is setup on a controller for another route, it will not begin to fire until that route is active (expected). But when leaving that route, the observer will continue to fire (not intended).

More discussion on behavior 2: When first loading the app, you can click "change multiple properties action" and the properties will begin incrementing. However the observer is not fired. Now navigate to the observer route. When you increment the properties, the observer will fire. Then navigate back to the index route. The observer will continue to fire on property increment. Now each time the properties are incremented from either route, the observer is fired. My intended behavior is to only have the observer fire when the observer route is active. Any way to achieve this?

And my question for behavior 1: Notice that the observer fires twice whenever the properties are updated, even though they are updated simultaneously. When updating two properties simultaneously, is it possible to have the observer fire only once?

App = Ember.Application.create();

App.Router.map(function(){
    this.resource('observer');
});
App.Router.reopen({location:'none'});

App.ApplicationController = Ember.Controller.extend({
    consoleProp: function(){
        console.log(this.get('controllers.application.prop1'));
    },
    changeTwoProperties: function(){
        this.get('controllers.application').incrementProperty('prop1');
        this.get('controllers.application').incrementProperty('prop2');
    },
    prop1:0,
    prop2:0
});

App.IndexController = Ember.Controller.extend({
    needs: ['application'],
    changeTwoPropertiesBinding: 'controllers.application.changeTwoProperties',
    consolePropBinding: 'controllers.application.consoleProp'
});

App.ObserverController = Ember.Controller.extend({
    needs: ['application'],
    changeTwoPropertiesBinding: 'controllers.application.changeTwoProperties',
    consolePropBinding: 'controllers.application.consoleProp',

    theObserver: function(){
        console.log('observer fired');
    }.observes('controllers.application.prop1', 'controllers.application.prop2')
});

Shimon Rachlenko Shimon Rachlenko · Accepted Answer · 2013-02-08T07:15:55

For the first part, use Ember.beginPropertyChanges() and Ember.endPropertyChanges(). See this SO answer for more info

Ember.beginPropertyChanges();
this.get('controllers.application').incrementProperty('prop1');
this.get('controllers.application').incrementProperty('prop2');
Ember.endPropertyChanges();

For the second behavior, it requires more research. I think the ObserverController is not created before you visit the observer route, but when you leave the route, it is not destroyed..

Ember.js Property Observer Unusual Behavior

1 Answers