Update view via anchor tag within the same route in Meteor.js

Question

I've been implementing pagination with URL parameters through Meteor.js. But when I click anchored tags to move to a new page, application won't update its view. When I click the other tag, then the view is updated correctly.

The behavior is really strange because (1) at least it recognizes onClick (I inspected this by attaching event handler) (2) although the view is updated on the second try, it has to be the third element. (Say I'm on the page 1. If I click page 2, it won't change. If I click page 2 again and again, it won't change. But when I click page 3, it changes.)

I think the problem lies somewhere around Router.route, because other than that same route it just works fine.

client.js

Router.route('/', {
  name: 'index',
  template: 'index',
  layoutTemplate: 'ApplicationLayout',
  waitOn: function() {
    var page = getQueryParams(window.location.search).page;
    page = page === undefined? 1: page;
    return Meteor.subscribe('recentPosts', page);
  },
  data: function() {
    return {
      posts: Posts.find({}, {
        sort: {publishedAt: -1}
      })
    };
  },
  onBeforeAction: function() {
    Meteor.call('postsCount', function(e, r) {
      Session.set('postsCount', r);
    });
    this.next();
  }
});

pagination.html

<template name="pagination">
  <li class="page {{#if isCurrent page}}active{{/if}}">
    <a href="/?page={{page}}">
      {{page}}
    </a>
  </li>
</template>

My URL scheme is domain/?page=<page_id>. Also my route works fine on refresh.

Answer 1

To solve your issue, I suspect that you'll need to change how you fetch the current page in the waitOn function:

var page = this.getParams().query.page;

getParams() is reactive, whereas this.params isn't (and you weren't using either - you should pass by the router), so the route's changing in the address bar but the subscription isn't being updated.