在 Meteor 中单击按钮实现无限滚动答案

【问题标题】：implement Infinite Scrolling on click of button in Meteor在 Meteor 中单击按钮实现无限滚动
【发布时间】：2015-06-10 21:43:18
【问题描述】：

从出版物中，我设置了一个名为 limit 的参数。这是我的控制器

MainPageController = BaseController.extend({

findOptions: function() {
return {sort: {createdAt: 1}};
},

waitOn: function() {
return Meteor.subscribe("allCars",5,this.findOptions());
},

data: function(){
 return {cars: Cars.find({},this.findOptions() )};
}
});

在我的模板中，我有一个单击按钮，我想加载接下来的 5 条记录。我的助手在不同的文件中。我怎样才能实现这种无限滚动。请帮忙

出版

Meteor.publish('allcars', function(limit){
return Jobs.find({}, {limit: limit});
});

然后我为它设置一个默认会话变量

Template.jobsList.onCreated(function(){
    Session.setDefault("carsLimit",5);
});

在帮手之后我很困惑，我做了很多乱七八糟的事情。

这是我的模板

<div class="col s12">
  <ul class="cars-list">
    {{#each allCars}}
    <li>
      {{> carItem}}
   </li>
   {{/each}}
  </ul>

【问题讨论】：

标签： javascript meteor meteor-helper

【解决方案1】：

Meteorpedia 有a piece on infinite scrolling，在我看来，这是在流星中无限滚动的最简单的实现。这很简单。

在你的情况下（按下一个按钮）它会更简单，因为你不需要听滚动事件。每次按下按钮时，只需增加 itemsLimit 会话变量。（在你的情况下不需要showMoreVisible() 函数）

Template.jobsList.events({
  'click #showMoreResults': function (e, t) {
    Session.set("carsLimit",
            Session.get("carsLimit") + 5);
  }
});

Template.jobsList.helpers({
  'moreResults': function() {
    return !(Cars.find().count() < Session.get("carsLimit"));
  }
});

Template.jobsList.onRendered(function(){
  Session.set("carsLimit",5);
  this.autorun(function () {
    Meteor.subscribe("allCars", Session.get('carsLimit'));
  });
});

在你的模板上：

<div class="col s12">
  <ul class="cars-list">
    {{#each allCars}}
    <li>
      {{> carItem}}
   </li>
   {{/each}}
   {{#if moreResults}}
   <li id="showMoreResults">More cars!</li>
   {{/if}}
  </ul>

【讨论】：

我试过了，但我仍然无法得到它。
我们可以查看您的发布、模板和模板助手代码吗？
我更新了出版物和模板以及少量代码。我的其他代码是一团糟。你能用这段代码解释一下吗
用建议更新了我的答案
我对此有误。我想这是一个愚蠢的问题，但由于我是流星新手，它可能有助于我更好地理解它，你能解释一下我需要订阅两次吗?我已经从控制器订阅它了。