CODEWITHSUNDEEP
ember.js
gcoladarci
gcoladarci

Reputation: 1119

EmberJS: Load a teaser of a model for a list, full model for detail view

Anyone figure out how to partially load a model for one view, then load the entire model for another?

For example:

  /*
    This will get all projects, so we only want an id and name returned from the server.
    Each project is a monster, so we don't want all data for each project.
  */
  App.ProjectsRoute = Ember.Route.extend({
    model: function () {
      return App.Project.find();
    }
  });

  /*
    This is a project detail, so we'd want the entire model returned from the server. Embedded records and all.
  */
  App.ProjectRoute = Ember.Route.extend({

  });

The closest thing I could find is this: https://stackoverflow.com/a/14183507/1125563

In that I can do something like this:

  App.ProjectRoute = Ember.Route.extend({
    setupController: function(controller, model) {
      if (model.get('isTeaser')){
        model.reload();
      }
    }
  });

In this workaround, I have a computed property isTeaser that checks a few things to determine if I've only partially loaded it.

Other than being a little messy, the only deal breaker here is that it's transitioning to the route with a partially loaded model and then after it's loaded, all the stuff will kind of in-elegantly snap in. Not a fan..

Am I missing something obvious?

Upvotes: 2

Views: 331

Answers (1)

gunn
gunn

Reputation: 9165

Here's my approach which eliminates the initial rendering delay. Is that what you meant by 'inelegant snap in'?

// Load the light version of all subjects on page load
App.ApplicationController = Em.Controller.extend({
  init: function() {
    return App.Subject.find();
  }
});

// Fetch all our previously loaded subjects
App.SubjectsRoute = Ember.Route.extend({
  model: function() {
    return App.Subject.all();
  }
});

App.SubjectRoute = Ember.Route.extend({
  // If we're loading the page directly to this route, do a normal find
  model: function(params) {
    return App.Subject.find(params.subject_id);
  },
  setupController: function(controller, model) {
    // Show what details we have for this subject (e.g. the title) immediately
    controller.set("model", model);

    // Load full details for the model and display them as soon as they arrive
    if (Em.isEmpty(model.get("text"))) {    
      App.Subject.find(model.get("id")).then(function(model) {
        return controller.set("model", model);
      });
    }
  }
});

Upvotes: 1

Related Questions