Angular2 Meteor, issue implementing infinite scroll (scroll reset to top)

Question

Trying to do an infinite scroll page that displays elements as the user scrolls.

So each time I detect that the scroll reaches the end of the page I call

this.recordLimit += 10;
this.subscribe('movements', {limit: this.recordLimit});

and that triggeres (autorun)

        this.autorun(h => {
            if (this.ready()) {
                this.items = Items.find(<potential limit filter here too>);
            }

All right. That is working. However each time this.items = Items.find(); is called, the user's browser is scrolled back up to the top.

Potentially this is because the dom elements are removed, the scroll is reset, and then the elements are added again without restoring the previous scroll position.

What am I doing wrong ?

Examples where it is 'apparenty' working:

@########### Edit ############@

Actually, I noticed that, putting after the Items.find() a h.stop() to stop the subscription, this works... I guess the previous mango cursor is updated with the last subscription limit.

However I am still not able to understand why this was repainting everything in the initial case..

Luna · Accepted Answer · 2016-10-12T18:43:48.303

1

I believe the problem is you're finding the documents again as you guessed. You should only subscribe to your publication in the autorun. Check this from Angular2 & Meteor tutorial which explains pub/sub pretty well.

In the autorun, it will rerun the find() and re-render all the documents which is why you need to rerun only the subscription in autorun for your case. Because of how pub/sub and observers work, since the only thing you change is the "limit" in your function and the rest is the same, your publish will only return the new documents, and keep the previously returned ones. The find() query on the client side will fetch the documents returned from the pub/sub and it won't rerender the already fetched documents when the amount of documents change.

edited Oct 12 '16 at 18:43

answered Oct 11 '16 at 10:02

Luna

1,148
10
17

I do not understand the "you should only subscribe to your publication", more precisely the "should" and the "only". How is subscribing inside an autorun either good practice or required ? – ATX Oct 11 '16 at 15:15
@ATX its because of how observers work. lets say you return 20 documents then with scroll, you change the limit to 40, it won't re-render the previously fetched 20 documents if you subscribe in your autorun and return the documents NOT in autorun. I have the same functionality for button clicks or inifinite scroll. – Luna Oct 12 '16 at 18:15
@ATX to be more clear about it, the subscribe returns the documents to the client side, not to a specific place in your app but makes them available in the client side. So you autorun the subscribe since you change the limit. The publish then gets the query and since the only change is the limit, it returns XX more documents. Since you already had xx documents before changing the limit and you don't return them inside the autorun, it functions as it should and why it is the "right" practice – Luna Oct 12 '16 at 18:20
I will mark your answer. However note that using ng release version (with rxjs) my solution is to use reactive variables for the limit variable, and put *both* sub and find in the same autorun. The expected result is reached that time. – ATX Oct 24 '16 at 23:55

Angular2 Meteor, issue implementing infinite scroll (scroll reset to top)

1 Answers1