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

Question

我有一个无限滚动，它会添加新的元素（链接），当我导航到该链接并在浏览器中返回时，我将返回结果的第一页，而不是先前滚动所添加的扩展元素行动。

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

The only way would be to save the state of your scroll, then re-apply your DOM manipulations after Meteor has rendered your templates.

For example, something like this:

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

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