Ember.js 余烬cli分页不工作

Ember.js 余烬cli分页不工作,ember.js,pagination,ember-data,ember-cli,ember-cli-addons,Ember.js,Pagination,Ember Data,Ember Cli,Ember Cli Addons,嗨,我想为我正在使用spring boot和的应用程序创建一个分页。在使用spring引导分页之前,rest控制器以以下格式返回数据: [{ "id" : 56789, "name" : "sample book", "status": "available", },{ "id" : 56789, "name" : "sample book", "status": "available", }] 在使用spring分页后,我的rest控制器以以下格式返回数据: { "content": [{

嗨,我想为我正在使用spring boot和的应用程序创建一个分页。在使用spring引导分页之前,rest控制器以以下格式返回数据:

[{
"id" : 56789,
"name" : "sample book",
"status": "available",
},{
"id" : 56789,
"name" : "sample book",
"status": "available",
}]
在使用spring分页后,我的rest控制器以以下格式返回数据:

{
"content": 
[{
"id" : 56789,
"name" : "sample book",
"status": "available",
},{
"id" : 56789,
"name" : "sample book",
"status": "available",
}],
"last": true,
"totalElements": 5,
"totalPages": 2,
"size": 3,
"number": 1,
"sort": null,
"first": false,
"numberOfElements": 2
}
现在数据的结构完全改变了,所以我需要修改我的余烬模型,以便余烬数据能够正确地序列化我的数据

有没有其他方法可以将spring boot分页应用于ember数据,而只需很少的更改?有没有标准或指导性的方法可以做到这一点

我真的需要改变我的余烬模型吗

余烬模型:

export default DS.Model.extend({
   id: DS.attr(),
   name: DS.attr(),
   status: DS.attr()
});
Route.js

import Ember from 'ember';
import RouteMixin from 'ember-cli-pagination/remote/route-mixin';

export default Ember.Route.extend(RouteMixin, {

model: function(params) {
params.paramMapping = {
  perPage: "size"};
return this.findPaged('book',params);
},

resetController: function (controller) {
var queryParams = controller.get('queryParams');
queryParams.forEach(function (param) {
  controller.set(param, null);
});
},

});
import Ember from 'ember';
import pagedArray from 'ember-cli-pagination/computed/paged-array';

export default Ember.Controller.extend({
queryParams: ["page", "perPage",'uid'],
pagedContent: pagedArray('content', {pageBinding: "page", perPageBinding: "perPage"}),
totalPagesBinding: "pagedContent.totalPages",
page: 0,
perPage: 2,

//some actions
});
<div class="row">
<div class="col-md-2">
    <h3>
        Books
    </h3>
</div>
</div>
<br/>
{{#each pagedContent}}
<h2>entered paged content</h2>
{{/each}}

{{page-numbers content=pagedContent}}
Controller.js

import Ember from 'ember';
import RouteMixin from 'ember-cli-pagination/remote/route-mixin';

export default Ember.Route.extend(RouteMixin, {

model: function(params) {
params.paramMapping = {
  perPage: "size"};
return this.findPaged('book',params);
},

resetController: function (controller) {
var queryParams = controller.get('queryParams');
queryParams.forEach(function (param) {
  controller.set(param, null);
});
},

});
import Ember from 'ember';
import pagedArray from 'ember-cli-pagination/computed/paged-array';

export default Ember.Controller.extend({
queryParams: ["page", "perPage",'uid'],
pagedContent: pagedArray('content', {pageBinding: "page", perPageBinding: "perPage"}),
totalPagesBinding: "pagedContent.totalPages",
page: 0,
perPage: 2,

//some actions
});
<div class="row">
<div class="col-md-2">
    <h3>
        Books
    </h3>
</div>
</div>
<br/>
{{#each pagedContent}}
<h2>entered paged content</h2>
{{/each}}

{{page-numbers content=pagedContent}}
在浏览器网络选项卡中,我可以看到响应,但在浏览器控制台中,我收到以下消息:

处理路由时出错:book.index数据未定义\u pushInternalModel

在Chrome中,出现以下异常:

ember.debug.js:30610处理路由时出错:books.index无法读取未定义类型的属性“type”错误:无法读取未定义类型的属性“type”

我的电脑没有加载

指数.hbs

import Ember from 'ember';
import RouteMixin from 'ember-cli-pagination/remote/route-mixin';

export default Ember.Route.extend(RouteMixin, {

model: function(params) {
params.paramMapping = {
  perPage: "size"};
return this.findPaged('book',params);
},

resetController: function (controller) {
var queryParams = controller.get('queryParams');
queryParams.forEach(function (param) {
  controller.set(param, null);
});
},

});
import Ember from 'ember';
import pagedArray from 'ember-cli-pagination/computed/paged-array';

export default Ember.Controller.extend({
queryParams: ["page", "perPage",'uid'],
pagedContent: pagedArray('content', {pageBinding: "page", perPageBinding: "perPage"}),
totalPagesBinding: "pagedContent.totalPages",
page: 0,
perPage: 2,

//some actions
});
<div class="row">
<div class="col-md-2">
    <h3>
        Books
    </h3>
</div>
</div>
<br/>
{{#each pagedContent}}
<h2>entered paged content</h2>
{{/each}}

{{page-numbers content=pagedContent}}

{{#每页内容} 输入分页内容 {{/每个}} {{页码内容=页面内容}

任何帮助都应该是值得欣赏的。

您不需要更改模型,您需要创建一个
自定义序列化程序(如果模型是唯一存在此问题的,则为该模型,或整个应用程序,则为整个应用程序)。你可以在@PedroRio中看到一个例子,非常感谢你的评论。我已经编辑了我的问题。我阅读了文档,似乎“this.findpage”可以为我们完成所有工作。如果我错了,请更正我。对不起,我不知道
ember cli分页
加载项。您应该将
{{{#每个页面内容作为{content}{{content.someproperty}{{/each}}
though@PedroRio问题仍然存在。我认为是这样。findPaged返回承诺您知道如何解决此承诺吗?或者您知道如何检查它是返回承诺还是同步承诺吗?路由上的
模型
钩子是承诺感知的,因此您可以返回承诺,它将正常工作。如果可能的话,我建议您尝试使用创建一个复制问题,这样您就可以在这里共享它,其他人也可以尝试看看他们是否可以提供帮助