Hi all,
I’m trying to implement an page with infinite scrolling and came across some trouble. First I will explain my current solution and I would like to know if this is the correct way to push things into the store.
From my understanding the expected way to setup infinite scrolling is to set the controllers model to a store filter which is a live record array which will automatically be updated as more records are added like so:
model: function (urlParams) {
return this.get('store').filter('question', { skip: 0, top: 5 }, function (q) { return true; });
},
Then you should have something in your application which triggers a method which adds more models with the same type to the store. Assuming the user has triggered an action to load more data the application eventually hits a method like:
loadMoreQuestions: function () {
var currentOffset = this.get("currentOffset");
var currentPageSize = this.get('currentPageSize');
this.set("isQuestionsLoading", true);
var questionsPromise = this.store.find('question', { skip: currentOffset, top: currentPageSize, state: "Normal" });
questionsPromise.then(function (questions) {
this.get('store').pushMany('question', questions);
this.incrementProperty("currentOffset", questions.get('length'));
}.bind(this));
questionsPromise.then(function () {
this.set("isQuestionsLoading", false);
}.bind(this));
return questionsPromise;
}
The expected result is that since we called store.pushMany('question', questions) it should look at each of the records inside recordArray returned from the find method, and push them into the store as Question models. Then because have our controller’s model effectively bound to an array which should be all the questions in the store, the page displaying the questions should be updated.
However, there is does not happen. The find promise returns succesfully, and I can see the filter function being called, but the page does not update.
My questions are:
- Am I using the store.filter method correct? Can it be used as I described where the model is set to this filter and by adding records to the store, the filter should update automatically?
- Am I pushing the result of the store.find method to the store correctly? I am slightly confused as to whether this is done automatically by find methods. I was basing my knowledge from: https://github.com/emberjs/data/blob/master/TRANSITION.md#promises
- What do I need to change to make this work? Or is there a better solution? By the way I know about Ember-ListView and I can’t use that because I have variable height items.
Here is more background information on how I got where I am now:
I originally tried the traditional method of having the model be initialized with an array, and the method to load more questions calls pushObjects() on the controller/model in order to add items to the page. However, this concept does not seem to work with ember-data because the find methods return classes, and not arrays. I even tried pushing the class’s content into the model, but that didn’t work either. It only works if you call this.set('model', findPromiseResponse) and in that case it would be replacing the items each time which does not work for infinite scrolling since previously loaded records should be preserve instead of overwritten.
Any help is appreciated. I hope they publish that new blog post on Ember-Data soon…