I am trying to manipulate backbone's fetch method to to deal with a bit of a non-standard api. The way the api works is as follows:

api/products/[page]?param1=val&param2=val

ex:

api/products/2?budget=low&categories=all

would be equivalent to getting the second page of results for which the budget is low and all categories are included.

I can pass the parameters after the query string just fine through the format:

self.productsItemsCollection.fetch({ success : onDataHandler, dataType: "json", data: { budget: 'low', categories: 'all' } });

but I'm not sure what to do about the pagination, since it es before the ? question mark.

Here is how the collection is set up:

define([
  'underscore',
  'backbone',
  'models/products/ProductsItemsModel'
], function(_, Backbone, ProductsItemsModel){

  var ProductsItemsCollection = Backbone.Collection.extend({

      model: ProductsItemsModel,

      initialize : function(models, options) {}, //MH - need to pass filters to this function

      url : function() {
        return '/api/products/'; //MH - need to pass page number to be appended to this url
      },

      parse : function(data) {
        debugger;
        return data.items;
      }

  });

  return ProductsItemsCollection;

});

How do I include the pagination in backbone's fetch mand given this api URL structure?

I am trying to manipulate backbone's fetch method to to deal with a bit of a non-standard api. The way the api works is as follows:

api/products/[page]?param1=val&param2=val

ex:

api/products/2?budget=low&categories=all

would be equivalent to getting the second page of results for which the budget is low and all categories are included.

I can pass the parameters after the query string just fine through the format:

self.productsItemsCollection.fetch({ success : onDataHandler, dataType: "json", data: { budget: 'low', categories: 'all' } });

but I'm not sure what to do about the pagination, since it es before the ? question mark.

Here is how the collection is set up:

define([
  'underscore',
  'backbone',
  'models/products/ProductsItemsModel'
], function(_, Backbone, ProductsItemsModel){

  var ProductsItemsCollection = Backbone.Collection.extend({

      model: ProductsItemsModel,

      initialize : function(models, options) {}, //MH - need to pass filters to this function

      url : function() {
        return '/api/products/'; //MH - need to pass page number to be appended to this url
      },

      parse : function(data) {
        debugger;
        return data.items;
      }

  });

  return ProductsItemsCollection;

});

How do I include the pagination in backbone's fetch mand given this api URL structure?

• javascript
• jquery
• ajax
• backbone.js
• backbone.js-collections

Share Improve this question Follow asked Oct 28, 2014 at 23:33 mheaversmheavers 30.2k6363 gold badges201201 silver badges326326 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You're on the right track in that Backbone can use the return value of a function as its 'url' value. What I personally would do, is set a page property on the collection (referenced through something like this.page), and include that in the output of the url function.

initialize: function() {
  this.page = 1; // Or whatever the default should be
},
url: function() {
  return '/api/products/ + this.page;
}

The problem then bees updating the page property, which can be as simple as 'ProductsItemsCollection.page = 2;'. Personally, I would also add a second fetch method to wrap the page update and fetch into a single method call.

fetch2: function(page, options) {
  if (page) {
    this.page = page;
  }
  return this.fetch(options);
}

Just few notes to your code. I think you don't need to define page number into your Collection. According to MVC pattern it's more suitable for Controller. Collection just should get parameter and return some data according to it. Meanwhile Backbone doesn't provide classic MVC Controller, but you can use for this purpose Backbone.View. So structure of your application could looks something like this:

    // Collection
    define([
      'backbone',
      'models/products/ProductsItemsModel'
    ], function(Backbone, ProductsItemsModel){

      return Backbone.Collection.extend({

      // I don't know what exactly your Model does, but if you don't override Backbone.Model with your own methods you don't really need to define it into your collection.
      model: ProductsItemsModel,

      initialize : function(models, options) {}, //MH - need to pass filters to this function

      url : function(page) {
        return '/api/products/' + page;
      },

      parse : function(data) {
        return data.items;
      }
  });
});

And then in your View you can fetch needed page and render it:

define([
  'jquery',
  'backbone',
  'ProductsItemsCollection'
], function($, Backbone, ProductsItemsCollection){

  return Backbone.View.extend({

      events: {

          // Your logic to get page number from your pagination.
          'click .pagination': 'getPageNumber'
      }

      collection: new ProductsItemsCollection(),

      initialize : function() {
          this.listenTo(this.collection, 'reset', this.render);

          // initial loading collection
          this.load(1); // load page #1
      },

      render: function () {
          // your render code
      }

      // Example function to show how you could get page number.
      getPageNumber: function(e) {
          var pageNumber = $(e.currentTarget).data('pageNumber');
          load(pageNumber);
      },

      load: function(page) {
          url: this.collection.url(page),
          data: {
              budget: 'low',
              categories: 'all'
          }
      }
  });
});

Something like that. So in this View you just make initialization of your Collection and make initial loading. Then all you should make is passing page number to your load function.

I read these answers, i guess they make sense but this is what i went with. just really simple:

app.WorkOrder = Backbone.Collection.extend({
    model: app.WorkOrderDetail,
    urlRoot: '/m2/api/w/',
    getWorkOrder: function(workorder_id, options) {
        this.url = this.urlRoot + workorder_id;
        return this.fetch(options);
    }
});

Then in the view i do this:

    app.AppView = Backbone.View.extend({
    el: '#workorderapp',
    initialize: function () {
        app.workOrder.getWorkOrder(workorder_id, {
            success:function(data) {
                //...do something with data
            }
        });
    },
});