How to update View when model is loaded

Question

Emberjs is able to uptade automagically the view when the model is loaded. For example, with the following template

{{#each controller}}
    {{name}}   
{{each}}

the view is updated each time a model in the controller is loaded.

But, what if we need to implement a custom view that does not support such feature. Precisely, I need a view that render a graphic chart. I use some third party library for that. The data that I have in my controller represent some points that my view should render as a chart. Usually with these third party library we need to set the data and then call the draw function.

The problem is that when I just bind my controller.model to my chart data, the chart have no idea if these data are really loaded and the draw function crashes. So I think, I need some observers somewhere but I can't figure out where to put it. My attempt is to observer controller.model.isLoaded and call draw when it changes. But it just works once, and when I go back and forth on my route, the draw is no more called because the model are all loaded.

Answer 1

You can put a conditional around the insertion of your view.

{{#if controller.model.isLoaded}}
Put your chart view in here
{{/if}}

The view will only be rendered once the model has loaded

Answer 2

You can switch from the model property that you are binding against to a wrapper chartData property. The chartData property can then be made dependent on both model and lastUpdate. Finally add an update() method that refreshes the lastUpdate property. Calling update would then automatically trigger a refresh of the chartData binding and hence the chart.

lastUpdate: new Date(),

chartData: function() {
  return this.get('model');
}.property('model', 'lastUpdate'),

update: function() {
  this.set('lastUpdate', new Date());
}