Question

Ember很新，我正在构建一个应用程序并遇到一个棘手的问题。

我的情况

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

目前，这是我的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({
    [...]
});

我会传递模板部分，这里不是问题，这很经典。

所以，此代码正常工作，我有我的容器列表，以及每个容器的propers内容列表。

我的问题=“白色的死亡屏幕”

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

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

如果我的页面已经加载（导航+没有内容的容器），我可以等待这么久，但是现在，我只是在30秒内有一个白页，不知道除了控制台知道的一切没关系。

当然，由于路线中的“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

我个人更喜欢异步的想法，显示你有容器，然后显示内容为loading / empty。

Ember - 如何在一个页面中处理2个模型，并且一个模型加载速度很慢？

1 个答案: