Meteor — Как Telescope загружает больше постов без повторного рендеринга?

Я пытаюсь понять, как реализовать функциональность 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;
   }
 }
});

Имеет смысл, что Meteor будет перерисовывать список при изменении postsLimit. Мне просто любопытно, как Telescope сделал это без повторного рендеринга списка и отображал только новые сообщения. Из того, что я вижу из кода, вместо сохранения лимита в Session автор использует маршрут top/:limit? и вместо waitOn они используют onBeforeAction. Трудно точно определить, какая часть кода помогает предотвратить повторную визуализацию списка. Может кто-нибудь помочь подробно объяснить, как они это сделали?


javascript meteor telescope
person BPm    schedule 10.11.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Часть, которая запускает повторный рендеринг, на самом деле waitOn. Используя waitOn, вы говорите Iron Router перенаправить вас на шаблон loading, пока вы ждете, что запускает повторный рендеринг и возвращает вас в верхнюю часть страницы.

Это работа waitOn, и она отлично работает при переходе от страницы к странице, но, очевидно, не идеальна при повторном рендеринге одной и той же страницы.

Кстати, обратите внимание, что новый параметр subscriptions может также вызывать такое же поведение (если вы установили глобальный шаблон loading).

Вот почему мы используем onBeforeAction в этом конкретном случае. Кстати, этот шаблон более подробно объясняется в Discover Meteor.

person Sacha    schedule 26.11.2014

arrow_upward
0
arrow_downward

Не знаю, полезно ли это, но чтобы загрузить больше сообщений, все, что вам нужно сделать, это добавить {{> 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>
person Michael Klump    schedule 14.11.2014
comment
Не думайте, что это поможет. Потому что postsLoadMore шаблон — это просто ссылка top/xx и загрузчик. Нажав на ссылку, вы перейдете на новый маршрут с xx сообщениями, как это помогает не перерисовывать список снова? - person BPm; 14.11.2014