2

我试图弄清楚如何实现Telescopeload more之类的功能。这是我原来的：

// 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;
   }
 }
});

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

4

2 回答 2

2

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

这是waitOn的工作，在逐页浏览时效果很好，但在重新渲染同一页面时显然不理想。

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

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

于 2014-11-26T02:38:26.173 回答
0

不知道这是否有帮助，但要加载更多帖子，您所要做的就是添加{{> UI.dynamic template=postsLoadMore}}postList 模板。

<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>
于 2014-11-14T04:43:43.527 回答