Question

我正在使用EmberJS 2.1和EmberData 2.1进行项目。

一切都很好，但似乎我无法理解如何从API中分页结果。

我从API获得的当前回复：

{
  "data": [
    {
      "type": "user",
      "attributes": {
        "firstName": "John",
        "lastName": "Doe",
        "company": "Google",
        "id": "1",
        "title": "Mr.",
        "email": "john@doe.com"
      },
      "id": "1"
    },
    {
      "type": "user",
      "attributes": {
        "firstName": "John",
        "lastName": "Doe",
        "company": "Google",
        "id": "2",
        "title": "Mr.",
        "email": "john@doe.com"
      },
      "id": "2"
    },
    {
      "type": "user",
      "attributes": {
        "firstName": "John",
        "lastName": "Doe",
        "company": "Google",
        "id": "3",
        "title": "Mr.",
        "email": "john@doe.com"
      },
      "id": "3"
    },
    {
      "type": "user",
      "attributes": {
        "firstName": "John",
        "lastName": "Doe",
        "company": "Google",
        "id": "4",
        "title": "Mr.",
        "email": "john@doe.com"
      },
      "id": "4"
    }
  ]
}

我的路线如下：

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

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    model: function(){
        return this.store.findAll('user');
    }
});

有没有资源我可以学习如何实施分页？我找到了很多教程，但他们是DS.RESTAdapter。

API是使用Spring MVC构建的。

谢谢

Answer 1

实现分页的一种方法是确保您的API返回与请求相关的元数据。您需要在响应中返回的结果计数以及可用资源的总数。它还需要能够响应页面[offset]和page [limit]的查询参数，以便它知道要发送给您的结果。

Ember方面 - 您需要为pageLimit和pageOffset设置查询参数，您需要根据您的商店中有多少记录计算偏移量，并将其作为请求的一部分发送到服务器，以便从从哪里开始给你回数据。限制只是每次想要返回的结果数。

Answer 2

我们正在使用相同的库，有两种替代方案可以立即使用：

利用已经实施的解决方案，比如说ember-addons支持分页，快速链接： https://www.emberaddons.com/?query=pagination

自己实施，如果您需要的是太定制的解决方案。在这种情况下，我建议您根据需要创建一个查询对象，并将其传递给store.query("user", query)，它支持开箱即用，解析可用于举例的元数据：区分是否存在还有什么需要加载的。我写了一个小粗略片，请原谅任何错别字：

// users controller
modelName: "user",

pageSize: 10,

// pageLimit：50，pageOffset：0，...

queryObject: Ember.computed("pageSize",/* more props ,*/ function(){
 const queryObject = {};
 const pageSize = this.get("pageSize");

//... validate pageSize and currentPage values, are they numbers, positive numbers, whatever.....

 queryObject.page = {
  page: pageSize
 };

 return queryObject;
}),

....

actions{
 fetchPage(pageIndex){
  // check pageIndex....

  // retrieve actual queryObject
  const queryObject = this.get("queryObject");

  // set which batch we are going to load now, "cursor" is just an example, depends what your backend expects
  queryObject.page.cursor = pageIndex;

  // query records
  return this.store.query(this.get("modelName"), queryObject)
   .then(/*...do sth with fetched records, update model, retrieve metadata...*/)
   .catch(/*...take care of error...*/);
 }
}

Ember数据DS.JSONAPIAdapter分页

2 个答案: