title: Javascript infinite scrolling & multiple AJAX Promises
body: <p>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.</p>
  
  <p>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 ?</p>
  
  <pre><code>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) =&gt; {
      const until = Math.min((index + 50), (this.get('model.gridData.length') - 1));
          Ember.run.later(() =&gt; {
              for (index; index &lt; until; index++) {
                  if (records[index].id === undefined) {
                      records.replace(index, 1, this.get(`model.gridData.${index}`));
                  }
              }
          }, 500);
      });
  }
  </code></pre>