rerender view when model property change in EmberJS - ember.js

Question

I'm trying to develop a small app using EmberJS and HighchartJS, and I have some problem to re-render the the HighChartJS after the Model property has changed. This is http://www.loancomparison.com.s3-website-us-east-1.amazonaws.com/
App.Loan = DS.Model.extend({
name : DS.attr('string'),
principal : DS.attr('number'),
interest_rate : DS.attr('number'),
months_to_pay : DS.attr('number')
});
App.LoansView = Ember.View.extend({
templateName: "loans",
loansChanged: function() {
//this.rerender();
Ember.run.scheduleOnce('afterRender', this, 'propertyChanged');
}.observes('controller.#each.principal', 'controller.#each.name', 'controller.#each.interest_rate', 'controller.#each.months_to_pay'),
propertyChanged : function() {
console.log("property changed");
this.loadHighChart(); // This will load the highchart function.
},
});
What I want is to notify the view whenever the model property finishes their change. However, when using observes, it notify the view when the model starts to change. This causes the scheduleOnce to run at the initial state of model property change only.
Edit: Resolved
The solution for this turned out to be very simple that I just need to create a "modified" property under the model loan. Then whenever the edit is made, I update this model. Now the view just need to observe the change of this "modified" property.

Answer 1

You'll want to hook into the save action within your LoanController: https://github.com/pmkhoa/loan-comparison/blob/master/source/assets/js/app/controllers/loanController.js#L7
You can communicate really easily between views and controllers by using Ember.Evented:
App.LoanController = Ember.ObjectController.extend(Ember.Evented, { <--PASS IN EMBER.EVENTED
//...
save: function () {
this.set('isEditing', false);
this.get('model').save().then(function () {
this.trigger('highChartReload');
}.bind(this));
},
//...
});
Notice that I've passed Ember.Evented into the controller (just like you would with any mixin...) and I've added a trigger to the save action.
Now, we'll want to listen for that event within the view: https://github.com/pmkhoa/loan-comparison/blob/master/source/assets/js/app/views/loansView.js#L3
App.LoansView = Ember.View.extend({
//...
didInsertElement: function () {
this.get('controller.controllers.loan').on('highChartReload', $.proxy(this.loadHighChart, this));
},
//...
});
Now the view will listen to LoanController for the event to trigger, then fire off the loadHighChart method.
The last thing to do will be to tell the LoansController to need 'loan':
App.LoansController = Ember.ArrayController.extend({
needs: ['loan'],
//...
});
That should do it. Hope that helps!