mardi 5 mai 2015

Ember.js: How to load a large model without blocking UI

I am loading a large model (2500 entries) in Ember Data from an API. It also takes 3 HTTP Requests since the server will only return 1000 results at a time.

My whole web browser freezes for a moment while it is loading, which begs the question:

What is the best way to load large models without blocking the UI?

I tried 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'));
                });
            }
        }




Aucun commentaire:

Enregistrer un commentaire