Question

Using ember-data, currently I’m loading data into the controller, on page load, as follows:

App.articlesController = Ember.ArrayController.create({
    content: App.store.findAll(App.Article)
});

Having a lot of controllers, this would result to a lot of requests. I would like to be able to fetch data from the server only when the controller is requested. Can you suggest, what is the “proper” way to do this?

Answer 1

Zack,

Have you looked at didInsertElement and willInsertElement? They will be called when a view did get put into the DOM or will get put into the DOM (respectively). I don’t think you need to use init here and you shouldn’t unless you have to.

Another note: hardcoding references to controllers in your views isn’t best either. You should have a binding in your handlebars template. For example if your handlebars template has this:

{{#view App.ArticlesView controllerBinding="App.articlesController"}}

your view could then be something like:

App.ArticlesView = Ember.View.extend({
  templateName: 'app_templates_layouts_articles',

  willInsertElement: function() {
    var controller = this.get('controller');

    if (controller && controller.get && controller.get('content') == null) {
      controller.refresh();
    }
  } 
});

That way if you ever need to reuse that view you can easily.