lundi 18 février 2019

Javascript infinite scrolling & multiple AJAX Promises

I am trying to implement infinite scrolling in my app. So I want to make multiple AJAX calls as user scrolls. So I want to get a new set of records from server on scroll. I have an action 'infiniteScrolled' which gets invoked by my custom component on scrolling.

My question is when I try to invoke this.get('handleGridPromise') again, it does not get fired again (probably because the promise was resolved by the 1st call) How can I fix the same ?

handleGridPromise: function() {
    var self = this;
    var request = self.get('serverParams');
    return new Ember.RSVP.Promise(function(resolve, reject){
        var promise = self.updateRequest(request);
        promise.then(function(updateRequest){
            var deferred = self.doXhrPost(updateRequest, self.get('gridURL'), true, false);
            deferred.then(function(response){               
                self.gridDataLoaded(response);
                resolve(self.get('model.gridData'));
            });
        });
    });
}.property('attr1', 'attr2'),


infiniteScrolled(record, index) {
    Ember.set(this.get('serverParams'), 'recordstartindex', index);
    Ember.set(this.get('serverParams'), 'recordendindex', index+50);
    this.get('handleGridPromise').then((records) => {
    const until = Math.min((index + 50), (this.get('model.gridData.length') - 1));
        Ember.run.later(() => {
            for (index; index < until; index++) {
                if (records[index].id === undefined) {
                    records.replace(index, 1, this.get(`model.gridData.${index}`));
                }
            }
        }, 500);
    });
}




Aucun commentaire:

Enregistrer un commentaire