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

Question

我正在尝试弄清楚如何实现 load more 功能，例如 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;
   }
 }
});

当 postsLimit 更改时，Meteor 将重新呈现列表是有道理的。我只是好奇 Telescope 是如何不重新渲染列表并且只渲染新帖子的。从我看到的 code , 而不是将限制存储在 Session 中，作者使用路由 top/:limit? 而不是使用 waitOn，他们使用 onBeforeAction。很难确定代码的哪一部分有助于防止重新呈现列表。有人可以帮忙详细解释一下他们是怎么做到的吗？

Answer 1

触发重新渲染的部分其实就是waitOn。通过使用 waitOn，您告诉 Iron Router 在您等待时将您重定向到 loading 模板，这会触发重新渲染并让您回到页面顶部。

这是 waitOn 的工作，从一个页面转到另一个页面时效果很好，但在重新呈现同一页面时显然不理想。

顺便说一下，请注意新的subscriptions 选项可以也触发相同的行为(如果您设置了全局loading 模板).

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