javascript - Meteor: How do you preserve dom manipulations when page refreshes or another page location?

Question

I have an infinite scroll that adds new elements (links), when I navigate to the link and go back in my browser, I am back to the first page of results and not the expansive elements that were added as a result of my previous scrolling action.

Answer 1

You are doing it all wrong! Need to do it the meteor way.

You simply grow the number of documents on the client side by using Deps.autorun() and changing the page number Session.set('currentPage');

main.js

//when scrollbar reaches end of page, just change the 'currentPage' session variable to 'grow' the list template
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
var nowPage = Session.get('pageNumber');
Session.set('pageNumber', parseInt(nowPage) + 1);
e.stopImmediatePropagation();
}

client/subscription.js

Deps.autorun(function(){
  Meteor.subscribe('huge-list', Session.get('currentPage'); //whenever currentPage changes, so will your subscription if you set up your publish() on the server side;
});

server/publication.js

Meteor.publish('huge-list', function(page){ //when session changes on client, this changes
return Requests.find({}, {limit:page});
});

Answer 2

唯一的方法是保存滚动状态，然后在 Meteor 渲染模板后重新应用 DOM 操作。

例如，像这样：

Template.my_template.rendered = function() {
    $('#my-scrolling-element').scroll(function(e) {scrollPosition = e.target.scrollTop()})

    if(scrollPosition) {
        $('#my-scrolling-element').scrollTo(scrollPosition);
    }
}