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中有更详细的解释。

Answer 2

不知道这是否有用，但要加载更多帖子，您只需在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>

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

2 个答案: