What's wrong with my pagination(Meteor)

Question

my router.js (i'm using iron-router):

...
PostsListController = RouteController.extend({
    template: 'postsList',
    increment: 4,
    postsLimit: function() {
        return parseInt(this.params.postsLimit) || this.increment;
    },
    findOptions: function() {
        return {sort: {submitted: -1}, limit: this.postsLimit()};
    },
    subscriptions: function() {
        this.postsSub = Meteor.subscribe('posts', this.findOptions());
    },
    posts: function() {
        return Posts.find({}, this.findOptions());
    },
    data: function() {
        var hasMore = this.posts().count() === this.postsLimit();
        var nextPath = this.route.path({postsLimit: this.postsLimit() + this.increment});
        return {
            posts: this.posts(),
            ready: this.postsSub.ready,
            nextPath: hasMore ? nextPath : null
        };
    }
});
NewsController = PostsListController.extend({
    template: 'newsTemplate',
    increment: 2,
    limit: function() {
        return parseInt(this.params.postsLimit) || this.increment;
    },
    findOptions: function() {
        return {sort: {submitted: -1}, limit: this.postsLimit()};
    },
    subscriptions: function() {
        this.postsSub = Meteor.subscribe('posts', this.findOptions());
    },
    posts: function() {
        return Posts.find({postType:'Новости'}, this.findOptions());
    },
    data: function() {
        var hasMore = this.posts().count() === this.postsLimit();
        var nextPath = this.route.path({postsLimit: this.postsLimit() + this.increment});
        return {
            posts: this.posts(),
            ready: this.postsSub.ready,
            nextPath: hasMore ? nextPath : null
        };
    }
});
Router.route('/news/:postsLimit?', {
    name: 'newsTemplate',
    controller: NewsController
});

Router.route('/:postsLimit?', {
    name: 'postsList'
});
...

My template(same as index template, differ only in names):

<template name="newsTemplate">
    <div class="container main">
    <div class="row">
        {{#each posts}}
            {{> newsItem}}
        {{/each}}

    </div>
    <div class="col-md-12">
        {{#if nextPath}}
            <div class="row">
                <a class="load-more" href="{{nextPath}}" style="color: black;font-size: 1.3em;"><button type="button" class="btn btn-default btn-block">Load more</button></a>
            </div>
        {{else}}
            {{#unless ready}}
                {{> spinner}}
            {{/unless}}
        {{/if}}
    </div>
        </div>
</template>

On index page(using PostsListController) it working good, but on url http://localhost:3000/news(using NewsController) :

• I'm getting properly posts, but button 'Load more' not working(Just doing nothing on click).

On url http://localhost:3000/news/2 (or news/1,3 etc.):

• it working fine and shows me the corrent amount of posts, button 'load more' is working too

What's the problem? Why button not working on http://localhost:3000/news ?

Answer 1

In your NewsController, you've changed the name of the postsLimit function to limit:

limit: function() {
    return parseInt(this.params.postsLimit) || this.increment;
},

But in your data function, you're still referring to this.postsLimit():

data: function() {
        var hasMore = this.posts().count() === this.postsLimit();
        var nextPath = this.route.path({postsLimit: this.postsLimit() + this.increment});
        return {
            posts: this.posts(),
            ready: this.postsSub.ready,
            nextPath: hasMore ? nextPath : null
        };
    }

Change your limit function to newsLimit to make it more clear, and then change the data function to use this.newsLimit().