Question

我正在为How is ajax pagination handled in EmberJS?实施类似的解决方案。

当有人进入没有数据的页面时，如何重定向到初始页面？即我有3页数据，有人进入？page = 4。

我试图改变queryParams：

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

这样可以正常工作，但会返回以下错误：

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)

并且还尝试更改控制器页面变量：

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

但后者没有效果。

这是我的路线：

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

控制器：

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

Answer 1

你的方法看起来很好，但我想有一个错字或类似的地方。 this.transitionTo({ queryParams: { page: 0 })会重定向到第一页。在model.get('length') === 0挂钩中检查afterModel并重定向是否也是正确的。

我写了一个Ember-Twiddle，以确保它在一个基本场景中工作：https://ember-twiddle.com/8bb8cdc068c4faa1cd8c35a0e8ac97f4

afterModel钩子就是：

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

我不太确定const { page=0 } = transition.queryParams;是否是有效的语法。以前从来没有见过这样的东西，我也不确定它应该验证什么。

EmberJs的分页，如何回归第一页？

1 个答案: