Hi I want to create a pagination for my application for that i am using spring-boot Pagination and ember-cli-pagination. Before using spring-boot pagination, rest controller returns data in the following format,
[{
"id" : 56789,
"name" : "sample book",
"status": "available",
},{
"id" : 56789,
"name" : "sample book",
"status": "available",
}]
after using spring-pagination my rest controller returns data in the format,
{
"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
}
Now the structure of the data completely changes so i need to modify my ember model so that ember data will properly serialize my data.
Is there any other way to apply spring-boot-pagination to ember data with minimal changes?Any standard or guided way to do that?
Do i really need to change my ember model?
Ember Model :
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);
});
},
});
Controller.js
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
});
In the browser network tab i can able to see the response but in browser console i am getting the following message,
Error while processing route: book.index data is undefined _pushInternalModel
In Chrome getting following exception:
ember.debug.js:30610 Error while processing route: books.index Cannot read property 'type' of undefined TypeError: Cannot read property 'type' of undefined
and my teomplate is not loading.
index.hbs
<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}}
Any help should be appreciable.