Question

我正在从API中加载Ember Data中的大型模型（2500个条目）。它还需要3个HTTP请求，因为服务器一次只能返回1000个结果。

我的整个网络浏览器在加载时冻结片刻，这引出了一个问题：

在不阻止用户界面的情况下加载大型模型的最佳方法是什么？

我尝试了beginPropertyChanges，endPropertyChanges：

Ember.RSVP.resolve(store.beginPropertyChanges())
  .then(getAllTeams)  // this loads the model
  .then(function() { return Ember.RSVP.resolve(store.endPropertyChanges()); });


var getAllTeams = function(teams, skip) {
    if (!teams) {
        return store.find('team', {limit:1000, skip: 0}).then(function(foundTeams) {
            var teams = foundTeams;
            return getAllTeams(foundTeams,teams.get('length'));
        });
    }
    else if (teams.get('length') < 1000) {
        return store.find('team');
    }
    else {
        return store.find('team', {limit: 1000, skip:skip}).then(function(foundTeams) {
            return getAllTeams(foundTeams,skip+teams.get('length'));
        });
    }
}

Answer 1

在商店上做beginPropertyChanges根本不会有任何有用的东西。

Ember的默认行为是，它会阻止大量下载。这是一种可能的方法。

// route
export default Ember.Route.extend({

 model: function() { 
   var all = return this.store.all('team'); 
   function get_more(n) {
     return store.find('team', {limit:1000, skip: n}) . 
       then(function(teams) { 
         if (teams.length === 1000) return get_more(n+1000); 
       })
   }(0));
   return all;
});

我们返回商店中的实时团队集合，最初可能为零。与此异步，我们启动一个循环，一次获取1000个项目。随着新项目的进入，实时收藏将会更新，相关的用户界面也会更新。

未测试。

Answer 2

Ember提供了一种处理长路线渲染时间的机制。我相信你要找的是Loading / Error Substates。

查看官方EmberJS指南页。

快乐编码:)

Ember.js：如何在不阻止UI的情况下加载大型模型

2 个答案: