Meteor - Telescope如何在不重新渲染的情况下加载更多帖子？

I'm trying to figure out how to implement the load more functionality like Telescope. This is what I have originally:

我正在试图弄清楚如何实现加载更多功能，如Telescope。这就是我原来的意思：

// Iron Router
Router.route('/posts', {
  name: 'posts.index',

  waitOn: function () {
    return Meteor.subscribe('posts', Session.get('postsLimit');
  },

  data: function () {
    return { posts: Posts.find({}, { sort: { createdAt: -1 } }) };
  },

  action: function () {
    this.render();
  }

});


// client/views/posts_list.html
<ul>
  {{#each posts}}
    <li>{{ title }}</li>
  {{/each}}
</ul>
<a href"#" class="load-more">Load more</a>


// client/views/posts_list.js
var POSTS_INCREMENT = 3;
Session.setDefault('postsLimit', POSTS_INCREMENT);

Template.PostsIndex.events({
   'click .load-more': function (e, tmpl) {
       Session.set('postsLimit', Session.get('postsLimit') + POSTS_INCREMENT);
       return false;
   }
 }
});

It makes sense that Meteor will rerender the list when the postsLimit changes. I'm just curious how Telescope did it without re-rendering the list and only render the new posts. From what I see from the code, instead of storing the limit in the Session, the author uses the route top/:limit? and instead of using waitOn, they use onBeforeAction. It's hard to pinpoint which part of the code helps prevent re-rendering the list. Could someone please help explain in detail how they did it?

有意义的是，当postsLimit发生变化时，Meteor将重新呈现列表。我只是很好奇Telescope如何在不重新渲染列表的情况下完成它并仅渲染新帖子。从我从代码中看到的，作者使用路由top /：limit而不是在Session中存储限制。而不是使用waitOn，他们使用onBeforeAction。很难确定代码的哪一部分有助于防止重新呈现列表。有人可以帮忙详细解释他们是如何做到的吗？

2 个解决方案

#1

The part that triggers the re-rendering is actually waitOn. By using waitOn, you're telling Iron Router to redirect you to the loading template while you wait, which is what triggers the re-rendering and sticks you back up at the top of the page.

触发重新渲染的部分实际上是waitOn。通过使用waitOn，您告诉Iron Router在您等待时将您重定向到加载模板，这是触发重新呈现并将您重新放回页面顶部的原因。

This is waitOn's job, and it works great when going from page to page, but is obviously not ideal when re-rendering the same page.

这是waitOn的工作，它在从一个页面到另一个页面时非常有效，但在重新渲染同一页面时显然不是理想的。

By the way, note that the new subscriptions option can also trigger the same behavior (if you've set a global loading template).

顺便说一下，请注意新的订阅选项也可以触发相同的行为（如果您设置了全局加载模板）。

So this is why we're using onBeforeAction in this specific case. This pattern is explained in more details in Discover Meteor, by the way.

所以这就是我们在这个特定情况下使用onBeforeAction的原因。顺便说一句，这种模式在Discover Meteor中有更详细的解释。

#2

Don't know if this is helpful but to load more posts all you have to do is add {{> UI.dynamic template=postsLoadMore}} in the postList template.

不知道这是否有用，但是要加载更多帖子，您只需在postList模板中添加{{> UI.dynamic template = postsLoadMore}}即可。

<template name="posts_list">
  {{> UI.dynamic template=postsListIncoming data=incoming}}
  <div class="posts-wrapper grid grid-module">
    <div class="posts list">
      {{#each posts}}
        {{> UI.dynamic template=post_item}}
      {{/each}}
    </div>
  </div>
  {{> UI.dynamic template=postsLoadMore}}
</template>

#1