Meteor 分页包 alethes:pages 详解

meteor add alethes:pages

// 原有存放数据的 collection
Players = new Mongo.Collection("players");

// 根据已经有数据的 collection 生成一个 Meteor.Pagination 类型的对象。
this.PlayersPages = new Meteor.Pagination(Players, {
  // 指定需要分页所使用的模版
  templateName: "playersTemplate"
});

<template name="playersTemplate">
    {{> pages}}
    {{> pagesNav}}  <!--分页导航按钮-->
</template>

this.ProductPages = new Meteor.Pagination(Products, {
    // 调试模式
    debug: true,
    // 认证函数，内部可以写一些过滤，让一些不想被用户看到的数据被过滤掉
    auth: function (skip, sub) {

        // 判断是否有用户登陆
        if (!sub.userId) {
            return false;
        }

        // 清空过滤器内容
        this.filters = {};

        // userSettings 是每个不同用户本地不同的分页属性，如果有多个访问者，每个访问者可以设定自己的分页属性
        let userSettings = this.userSettings[sub._session.id]  {}
            , uFields = userSettings.fields  this.fields
            , uSort = userSettings.sort  this.sort
            , uPerPage = userSettings.perPage  this.perPage
            , _filters = userSettings.filters  this.filters
            , _options = {fields: uFields, sort: uSort, limit: uPerPage, skip: skip};

        // 将不想给用户看到的数据过滤掉，这里你可以写自己的过滤代码
        let shop = ReactionCore.getCurrentShop(this);
        if (shop) {
            _.extend(_filters, {shopId: shop._id});
            // products are always visible to owners
            if (!(Roles.userIsInRole(sub.userId, ["owner", "admin", "createProduct"], shop._id))) {
                _.extend(_filters, {isVisible: true});
            }
        }

        // 返回新的分页属性
        return [_filters, _options];
    },
    // 允许每个不同用户设定的分页属性有那些选项
    availableSettings: {
        limit: true,
        sort: true,
        filters: true
    },
    // 分页最外部的 div class 名
    divWrapper: 'row',
    // 是否启用滚动分页（瀑布流）
    infinite: true,
    // 滚动条加载到什么位置时加载下一组分页数据，这个参数问题比较多，后面再介绍
    infiniteTrigger: .8,
    // 滚动加载模式下，后续页面最小的加载时间间隔
    infiniteRateLimit: 1,
    // 暂时不用
    infiniteStep: 1,
    // 分页时每页数据中所有子项目所用的分页模版，你可以设定各种你已经美化过的模版
    itemTemplate: "productGridItems",
    // 分页所用的模版
    templateName: "infiniteProducts",
    // 最多显示多少数据
    pageSizeLimit: 1000,
    // 第一页加载多少数据
    perPage: 4,
    // 最大 subscribe 的数据两
    maxSubscriptions: 500,
    // 预加载页数，dataMargin * perPage + perPage = 页面首次打开显示的数据量
    dataMargin: 1,
    // 对数据进行排序
    sort: {
        order: 1, title: 1
    }
});

Pages.prototype.setInfiniteTrigger = function() {
  return $(window).scroll((_.throttle(function() {
    var l, oh, t;
    // 获取你设定的 infiniteTrigger 值
    t = this.infiniteTrigger;
    // 获取当前 body 的高度，应该是页面所有数据的高度之和
    oh = document.body.offsetHeight;
    // 判断你设定的 infiniteTrigger 值是否大于 1 做不同的操作
    if (t > 1) {
      l = oh - t;
    } else if (t > 0) {
      // l = body 的高度 * 你设定的 infiniteTrigger 的高度
      // 假设 body 已经有 2500 的高度了，2500 * 0.8 = 2000
      l = oh * t;
    } else {
      return;
    }
    // 如果当前可视的页面高度 + 滚动条的位置 >= 上面计算出来 l 的值
    if ((window.innerHeight + window.scrollY) >= l) {
      // 加载下一组数据
      if (this.lastPage < this.sess("totalPages")) {
        return this.sess("currentPage", this.lastPage + 1);
      }
    }
  }, this.infiniteRateLimit * 1000)).bind(this));
};