在 Meteor 中点击按钮实现无限滚动

Question

从发布开始，我正在设置一个名为 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>

Answer 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>

在 Meteor 中点击按钮实现无限滚动

implement Infinite Scrolling on click of button in Meteor

javascript

meteor

meteor-helper