2

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

// 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?

Sacha
  • 1,987
  • 1
  • 24
  • 41
BPm
  • 2,924
  • 11
  • 33
  • 51

2 Answers2

2

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.

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.

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.

Sacha
  • 1,987
  • 1
  • 24
  • 41
0

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.

<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>
Michael Klump
  • 141
  • 2
  • 9
  • Don't think it will help. Because `postsLoadMore` template is just a link `top/xx` and a loading spinner. Clicking on the link will take you to a new route with `xx` posts, how does it help not re-rendering the list again? – BPm Nov 14 '14 at 05:07