EmberJS:为列表添加模型的预告片,为详细视图加载完整模型

时间:2013-06-29 12:54:02

标签: ember.js

任何人都知道如何为一个视图部分加载模型,然后将整个模型加载到另一个视图中?

例如:

  /*
    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({

  });

我能找到的最接近的是:https://stackoverflow.com/a/14183507/1125563

我可以这样做:

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

在这个解决方法中,我有一个计算属性isTeaser,它检查一些事情以确定我是否只是部分加载它。

除了有点凌乱之外,这里唯一的交易破坏者是它正在过渡到带有部分装载模型的路线,然后在装载之后,所有的东西都会优雅地插入。不是粉丝..

我错过了一些明显的东西吗?

1 个答案:

答案 0 :(得分:1)

这是我的方法,它消除了初始渲染延迟。这就是你所说的'不优雅的快照'

// 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);
      });
    }
  }
});