How to run observers on Route when Route is extended? - ember.js

Question

Suppose I have a variable title that runs an observer like below.
Ember.Route.reopenClass({
title: 'Ember Application',
_titleDidChange: function(){
console.log('Title Updated');
}.observes('title')
});
So whenever now a route is created and a new title is set i am expecting its observer to run. But its not happening.
App.IndexRoute = Ember.Route.extend({
title: 'index Route',
model: function() {
return ['red', 'yellow', 'blue'];
}
});
What should be done to make this functionality work like i wanted?
Here is the jsbin link
http://emberjs.jsbin.com/neges/1/edit
UPDATE: ok..i found something from EmberJS github. They are already trying to implement title same way but need to do changes in ember.js which is not an option for me. Any Simple way to do same https://github.com/emberjs/ember.js/pull/3689/files#r9367594

Answer 1

How about this:
App = Ember.Application.create();
Ember.Route.reopen({
title: 'Ember Application',
_titleDidChange: function(){
console.log('Title Updated: ' + this.get("title"));
}.observes('title').on("init")
});
App.IndexRoute = Ember.Route.extend({
title: 'index Route'
});
Two crucial changes were needed to make your code to work:
Switched from reopenClass to reopen. reopenClass is used to add static properties to the class itself, not its instances.
Added on("init"), which will ensure property change events will trigger during object initialization, which is what you need.
Updated jsbin is here.