implement Infinite Scrolling on click of button in Meteor

Question

From publication i am setting an argument called limit. and this is my controller

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() )};
}
});

in my Template i have a button on click of which i want to load the next 5 records. my helpers are in different file. how can i implement this infinite scrolling. please help

Publication

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

then i am setting a default session variable for it

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

after this in the helper i am very confused and its a whole lot of mess i have done.

and this is my template

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

SylvainB · Accepted Answer · 2015-06-10 13:43:18Z

1

Meteorpedia has a piece on infinite scrolling which is, in my opinion, the simplest implementation for infinite scrolling in meteor. It's dead simple.

In your case (pressing a button) it would be even simpler, as you have no need to listen to scrolling events. Just increment the itemsLimit session variable every time your button is pressed. (no need for a showMoreVisible() function in your case)

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'));
  });
});

And on your template:

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

edited Jun 10, 2015 at 13:43

answered Jun 10, 2015 at 12:27

SylvainB

4,8502 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Neo Over a year ago

i tried doing it but still i am not able to get it.

SylvainB Over a year ago

Can we see your code for publication, template and template helpers?

Neo Over a year ago

i updated publication and template and little code. my other code is a mess. can you please explain with this code

SylvainB Over a year ago

Updated my answer with suggestions

Neo Over a year ago

I am having an error with this.i guess this is a dumb question but as i am new in meteor it might help me understand it better, can you please explain do i need to subscribe it two times? i am already subscribing it from the controller.

|

Collectives™ on Stack Overflow

implement Infinite Scrolling on click of button in Meteor

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related