Server side paging when result is always paginated

I’m learning Ember and I’m trying to do a paginated list that retrieves data from a RESTful service.

The service returns the data as follows:

  • Ember 2, filter relationship models (hasMany, belongsTo) and calculate computed property based on relationships
  • How to cache query result in ember data
  • Ember raw JSON transform doesn't work as excepted?
  • How to use custom urls with ember-data?
  • How do we unit test a Model Mixin with ember-cli
  • Ember Data belongsTo async relationship omitted from createRecord() save() serialization
  • {
        result: [
            {
                id: " ALFKI "
                companyName : " Alfreds Futterkiste "
                contactName : " Maria Anders " ,
                ContactTitle : " Sales Representative "
                address : " Obere Str 57" ,
                city: "Berlin " ,
                postalCode : " 12209 " ,
                country: " Germany" ,
                phone: " 030-0074321 "
                fax: " 030-0076545 "
                link: " http://localhost:2828/customers/ALFKI "
            }
            {
                id: " ANATR "
                companyName : " Ana Trujillo sandwiches and ice cream "
                contactName : " Ana Trujillo " ,
                ContactTitle : "Owner " ,
                address : " 2222 Avenue of the Constitution " ,
                city: " Mexico DF "
                postalCode : " 05021 " ,
                country: " Mexico " ,
                phone: " (5) 555-4729 "
                fax: " (5) 555-3745 "
                link: " http://localhost:2828/customers/ANATR "
            }
    
            ]
            metadata : {
                offset : 1,
                limit : 10,
                totalCount : 92,
                links: {
                    self " http://localhost:2828/customers?format=json&offset=1&limit=10 "
                    last: " http://localhost:2828/customers?format=json&offset=82&limit=10 "
                    next : " http://localhost:2828/customers?format=json&offset=11&limit=10 "
                }
        }
    }
    

    Server always returns collections with pagination data as links. To request a new page, the URL has the following format:

    http://api.server/customers?offset=1&limit=10
    

    My Route configuration is:

    Northwind.CustomersRoute = Ember.Route.extend({    
    
        model: function () {
    
            var controller = this.controllerFor('customer');
    
            return this.get('store').findQuery('customer', {offset: controller.offset, limit:controller.limit});
    
        }
    
    });
    

    How I can implement controller to this scenario?.

    Thanks in advance.

  • How do I send POST in place of PUT or DELETE in Ember?
  • Ember JS - Updating / Refreshing Model data From Route Action
  • How to use custom urls with ember-data?
  • After using jQuery UI to sort an Ember.js item, using Ember Data's model.deleteRecord() doesn't work
  • Backend Validation with RESTAdapter always “The adapter rejected the commit because it was invalid”
  • Looping over an Ember.js promise
  • One Solution collect form web for “Server side paging when result is always paginated”

    SOLVED.

    New router

    Northwind.CustomersRoute = Ember.Route.extend({        
        model: function () {    
            var controller = this.controllerFor('customer');        
    
            return this.get('store').findQuery('customer', { offset: controller.offset, limit: controller.limit });    
        },   
    
        setupController: function (controller, model) {
            controller.set('model', model);
            controller.set('contentLoaded', true);
        }    
    });
    

    I’m using a Pagination mixin similar to this.

    Controller

    Northwind.ArrayController = Ember.ArrayController.extend(Northwind.PaginationMixin, {        
        contentLoaded: false,           
        loadMetadata: function () {     
            if (!this.get('contentLoaded')) return;
    
            var model = this.get('model');
            var meta = this.get('store').metadataFor(model.type);
    
            if (meta) {
                // Metadata object
                var metadata = Ember.Object.create({
                    offset: meta.offset,
                    limit: meta.limit,
                    totalCount: meta.totalCount,
                    links: Ember.makeArray()
                });
    
                // Pagination links
                if (meta.links) {
                    for (var link in meta.links) {
                        var lnkObj = Ember.Object.create(Northwind.Common.Uri.queryParams(meta.links[link]));
                        lnkObj.set('rel', link);
                        metadata.links.pushObject(lnkObj);
                    }
                }
    
                this.set('metadata', metadata);
                this.set('limit', metadata.limit);
                this.set('totalCount', metadata.totalCount);
                // offset is automatically calculated based on page property
            }
    
        }.observes('contentLoaded'),
    
        refresh: function () {    
            var offset = this.get('offset');
            var limit = this.get('limit');
            var self = this;
    
            self.set('contentLoaded', false);
    
            this.get('store').findQuery('customers', { offset: offset, limit: limit }).then(function (result) {          
                self.set('model', result);
                self.set('contentLoaded', true);
            });    
        }.observes('page')    
    });
    

    https://github.com/jdmartinez/Northwind/tree/pre-0.1