Meteor Infinite Scroll

Enables infinite scrolling at the template level. This package allows you to increment the limit parameter of a MongoDB query as the user scrolls down the page. This allows Meteor to use the Oplog Observe Driver for your query, as well as leaving you in control of your publications.

Usage:

Call this.infiniteScroll in the created or rendered functions for your template.

Template.comments.created = function() {
  // Enable infinite scrolling on this template
  this.infiniteScroll({
    perPage: 20,                        // How many results to load "per page"
    query: {                            // The query to use as the selector in our collection.find() query
        post: 71
    },
    subManager: new SubsManager(),      // (optional, experimental) A meteorhacks:subs-manager to set the subscription on
                                        // Useful when you want the data to persist after this template
                                        // is destroyed.
    collection: 'Comments',             // The name of the collection to use for counting results
    publication: 'CommentsInfinite',     // (optional) The name of the publication to subscribe.
                                        // Defaults to {collection}Infinite
    container: '#selector',              // (optional) Selector to scroll div. Defaults to window
    loadingTemplateName:'loading'       // (optional) Name of loading graphic (spinner) template. Default will show "Loading..."
  });
};

Create a publication on the server:

if(Meteor.isServer){
    Meteor.publish('CommentsInfinite', function(limit, query) {
        // Don't use the query object directly in your cursor for security!
        var selector = {};
        check(limit, Number);
        check(query.name, String);
        // Assign safe values to a new object after they have been validated
        selector.name = query.name;

      	return Comments.find(selector, {
          limit: limit,
          // Using sort here is necessary to continue to use the Oplog Observe Driver!
          // https://github.com/meteor/meteor/wiki/Oplog-Observe-Driver
          sort: {
            created: 1
          }
        });
    });
}

Render your data as usual. Render the {{> infiniteScroll }} template after your data is rendered:

<template name="comments">
    {{#each comments}}
        {{content}}
    {{/each}}
    {{> infiniteScroll }}
</template>

Infinite Scroll will increase the limit of the subscription as the {{> infiniteScroll }} template approaches the viewport.

Provide data to the template as you usually would. Use Template.instance().infiniteSub.ready() like you would use subscriptionsReady() on the template instance.

Template.comments.helpers({
  comments: function() {
    return Comments.find({ post: 71 },  {
        limit: Template.instance().infiniteScroll.getLimit(), // optional call to getLimit()
        sort: {
            created: 1
        }
    });
  }
});

Only `limit`

Using skip will cause Meteor to use the Polling Observe Driver (see Oplog Observe Driver in the Meteor Wiki). For a full pagination solution that uses skip, check out alethes:pages.

Styling the loader

The {{> infiniteScroll }} template renders:

<template name="infiniteScroll">
  <div class="infinite-load-more">
    <div class="infinite-label">
      Loading...
    </div>
  </div>
</template>

When the subscription is loading more data, .infinite-load-more will receive the class loading. It will be removed when the subscription is marked as ready.

.infinite-label is only visible when the subscription is loading.

API

You can reactively access the current limit by using [templateInstance].infiniteScroll.getLimit() (e.g. Template.instance().infiniteScroll.getLimit())

Todo:

Customizable threshold for loading more results

maxfi / meteor-infinite-scroll Goto Github PK