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

1 个答案: