ember cli pagination not working

586 Views Asked by At

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.

0

There are 0 best solutions below