ember.js - Ember - 如何在一个页面中处理 2 个模型，并且其中一个模型加载速度非常慢？

Question

我对 Ember 很陌生，正在构建一个应用程序并遇到了一个难题。

我的情况

我有一个页面，它应该显示一个名为“容器”的元素列表，并且在每个容器内，我想显示几个“内容”。

现在，这是我的 JS 代码的一个非常简化的版本(只是为了给您一个想法):

App.ContainersRoute = Ember.Route.extend({
    model: function() {
        return this.store.findAll('container');
    }
});
App.Container = DS.Model.extend({
    title: DS.attr('string'),
    contents: DS.hasMany('content')
});
App.Content = DS.Model.extend({
    [...]
});

我将传递模板部分，这在这里不是问题，它非常经典。

所以，这段代码正在工作，我有容器列表，以及每个容器的属性内容列表。

我的问题=“死亡白屏”

事实上，当我从 JSON 格式的服务器获取数据时，目前在 Ember 转换到我的页面之前，我需要等待所有数据的加载。

问题是，“容器”数据非常小并且是静态的，所以我的服务器可以在不到一秒的时间内回答它，但是，对于“内容”部分，它很长(20到40秒之间) ，因为我的服务器需要做很多工作才能从我的数据库恢复这些日期。

如果我的页面已经加载(导航+没有内容的容器)，我等待这么长时间就可以了，但现在，我只有 30 秒的白色页面，除了控制台知道一切之外，我什么都不知道没问题。

当然，由于 route 的“beforeModel”，我可以使用“加载栏”，但我非常希望至少能够访问 UI。

对于您来说，什么是解决这个问题的好方法？

提前非常感谢您的帮助:)

Answer 1

我会将内容设为异步并在事后获取该内容，以便您可以提供更具响应性的外观和感觉。

App.Container = DS.Model.extend({
    title: DS.attr('string'),
    contents: DS.hasMany('content', {async: true})
});
App.Content = DS.Model.extend({
    [...]
});

这意味着 Ember Data 将在请求时对该数据进行回调，而不是与容器数据同时回调。

示例:http://emberjs.jsbin.com/OxIDiVU/1045/edit

此外，您可以在 Containers 资源上方的资源中添加加载路线，该路线可以提供有关如何获取数据的反馈。 http://emberjs.com/guides/routing/loading-and-error-substates/

示例:http://emberjs.jsbin.com/cerid/2/edit

我个人更喜欢异步的想法，显示您有容器的事实，但然后将内容显示为正在加载/空。