CODEWITHSUNDEEP
ember.jspagination
pcambra
pcambra

Reputation: 721

EmberJs pagination, how to return to first page?

I am implementing a similar solution to How is ajax pagination handled in EmberJS? for my pagination.

How would I redirect to the initial page when someone enters a page with no data? I.e. I have 3 pages of data and someone enters ?page=4.

I've tried to alter the queryParams:

if (model.get('length') === 0) {
  this.transitionTo({queryParams: {page:'0'}});
}

This works fine, but returns the following error:

TypeError: Cannot read property 'name' of undefined
    at Class.finalizeQueryParamChange (ember.debug.js:27880)
    at Router.triggerEvent (ember.debug.js:30355)
    at Object.trigger (ember.debug.js:50524)
    at finalizeQueryParamChange (ember.debug.js:49635)
    at Router.queryParamsTransition (ember.debug.js:49008)
    at Router.getTransitionByIntent (ember.debug.js:48919)
    at Router.transitionByIntent (ember.debug.js:49026)
    at doTransition (ember.debug.js:49603)
    at Router.transitionTo (ember.debug.js:49096)
    at Class._doTransition (ember.debug.js:29999)

And also tried to alter the controller page variable:

this.controllerFor('my-controller').set('page', 0);

But the later has no effect.

This is my route:

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  queryParams: {
    page: {
      refreshModel: true
    }
  },
  model: function(params) {
    return this.store.query('model', {
      page: params.page,
      limit: params.limit
    });
  },
  afterModel: function(model, transition) {
    const { page=0 } = transition.queryParams;
    let controller = this.controllerFor('model.list');

     // ---> Here is where I put the redirection tries above.


    (more unrelated code)
  }
});

And the controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams:['page', 'limit'],
  page: 0,
  limit: 25,
  actions: {
    nextPage() {
      this.set('page', this.get('page') + 1);
    },
    prevPage() {
      if (this.get('page') >= 1) {
        this.set('page', this.get('page') - 1);
      }
    }
  }
});

Upvotes: 0

Views: 161

Answers (1)

jelhan
jelhan

Reputation: 6338

Your approach seems fine but I guess there is a typo or something a like somewhere. this.transitionTo({ queryParams: { page: 0 }) does the redirect to first page. Checking model.get('length') === 0 in afterModel hook and redirecting if it's true also seems valid.

I've written a Ember-Twiddle to ensure it's working in a basic scenario: https://ember-twiddle.com/8bb8cdc068c4faa1cd8c35a0e8ac97f4

afterModel hook is simply:

  afterModel(model) {
    if (isEmpty(model)) {
      this.transitionTo({ queryParams: { page: 0 }});
    }
  }

I'm not quite sure if const { page=0 } = transition.queryParams; is valid syntax. Haven't ever seen something like this before and I'm also not sure what it should validate to.

Upvotes: 1

Related Questions