pass parameters to backbone fetch url to deal with a non-standard api

Question

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 comes 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 command given this api URL structure?

score 3 · Accepted Answer · answered Oct 28 '14 at 23:56

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 becomes 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);
}

...but then you (and every developer that works with your code) has to remember to call `fetch2` instead of fetch. That's poor coding and error prone. Instead, override fetch in your model to set the page and then call the superclass's implementation of `fetch`. — Madbreaks, Aug 24 '16 at 23:04

score 0 · Answer 2 · answered Oct 29 '14 at 12:19

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.

score 0 · Answer 3 · answered Feb 25 '16 at 16:21

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
            }
        });
    },
});

pass parameters to backbone fetch url to deal with a non-standard api

3 Answers3