0

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);
    });
}
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • Btw, avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! – Bergi Feb 18 '19 at 15:02
  • you defined `handleGridPromise` as a computed property with a dependency of 2 other properties. As long as `attr1` or `attr2` value will not change the promise will not be updated. – Ramy Ben Aroya Feb 18 '19 at 16:08
  • Oh k..So that might be the reason why promise code might not be getting called.....Even though I explicitly have this line/code this.get('handleGridPromise').then() ........... I was thinking in the direction that since the promise might have already got resolved during the 1st call, it does not call the resolved promise again...Do you want to add anything around that ? – copenndthagen Feb 18 '19 at 16:23
  • yes you are right, that's fishy, cause the `then` callback should have been called again since the promise has already been resolved. Are you seeing that the `POST` ajax is being sent again? if not then I would try to debug `self.updateRequest` function. if you can add the missing code it can be helpful. – Ramy Ben Aroya Feb 18 '19 at 16:44
  • I do not see the POST ajax call being made again...As of now, I do not have the updateRequest code handy, but it just creates a request object to be posted to server – copenndthagen Feb 18 '19 at 16:46
  • What on earth is `.property('attr1', 'attr2')` supposed to do? – Roamer-1888 Feb 18 '19 at 23:25
  • aatr1 & attr2 actually just are CPs used within the function...I have just pasted relevant pieces of code here... – copenndthagen Feb 19 '19 at 07:28
  • @RamyBenAroya; updateRequest does not have much code except constructing the request object...Would you be able to tell if having the new Promise code inside the CP work ? meaning can a call to that be made from my infiniteScrolled (as I am doing currently) – copenndthagen Feb 19 '19 at 07:30
  • 1
    There shouldn't be any problem with that. You can see it's working here: https://ember-twiddle.com/e7916267e2107eb1d903c68d5e92384d?openFiles=controllers.application.js%2C – Ramy Ben Aroya Feb 19 '19 at 08:14
  • 3
    @Roamer-1888 the `.property(...)` is a legacy computed property definition: https://guides.emberjs.com/v1.10.0/object-model/computed-properties/ – Ramy Ben Aroya Feb 19 '19 at 08:18
  • Ah, so it's an Ember thing. I'm not an Ember person. Thank you. – Roamer-1888 Feb 19 '19 at 14:32
  • @RamyBenAroya; Your ember-twiddle example is bang on and I can get the promise to fire if I add a CP like you have shown. Just had a couple of questions before I close this though; 1. How is it able to invoke a resolved promise again (I though a resolved promise cannot be called again) ? 2. Is it possible to have a CP depend on another CP ? So in your example let's say cp1 was not just a normal property, but instead was a CP itself. Thanks again for all your help in creating the twiddle. If possible, I would have given 1000 upvotes just on that example... – copenndthagen Feb 20 '19 at 05:33
  • 1
    (1) A promise is stateful so once it is resolved/rejected it will keep calling any bounded then/catch callback even after it has been fulfilled or rejected. (2) Correct, it doesn't matter. Good luck. – Ramy Ben Aroya Feb 20 '19 at 08:08
  • @RamyBenAroya; I am a bit confused by when you say promise is stateful & why/how I am able to invoke the resolved promise multiple times. I thought that promise caches the result, and will give the same result each time. i.e. computation for the promise is never done multiple times. – copenndthagen Feb 23 '19 at 06:03
  • You are right that's what I meant – Ramy Ben Aroya Feb 23 '19 at 09:40

0 Answers0