Passing Backbone fetch parameters to Laravel application

I’ve noticed that some people are having trouble using Backbone fetch function to pass parameters to their PHP applications.

In this very short post I’m going to fix that and demonstrate how to pass a query parameter during backbone fetch call so that the PHP application (running Laravel) will return specific data. For example the data could be sorted in different ways or it may be the data needs to be acquired dynamically based on what the user is doing and who the user is.

Backbone has a way of passing data with the fetch call before it fetches the data. Here is a short copy of the docs sections :

jQuery.ajax options can also be passed directly as fetch options, so to fetch a specific page of a paginated collection: Documents.fetch({data: {page: 3}})

Here is an example of Backbone Router that has fetches different data depending on what route you hit in the web application:

var Photo = Backbone.Model.extend({  
            initialize: function(){},  
            defaults: {  
                location: 'photourl',  
                id : 1  
            }  
        });    

var PhotoCollection = Backbone.Collection.extend({  
    model : Photo,
    url: "http://127.0.0.1/yourapp/public/photos" 
});

var photos = new PhotoCollection;  

var AppRouter = Backbone.Router.extend({
    routes: {
        ""      : "showNew",
        "new"   : "showNew",
        "top"   : "showTop",
        "random": "showRandom"
    },

    showNew: function(){
        photos.fetch({ data: {sortby: "new"}});  
    },

    showTop: function() {
        photos.fetch({ data: {sortby: "top"}});  
    },

    showRandom: function() {
        photos.fetch({ data: {sortby: "random"}});  
    }

});

All that’s left is implement these different query parameters in the Laravel app, here is a short copy paste of my route that returns real data (model called “photos” ) sorting it in different ways depending on the Query parameter that we pass from Backbone fetch function :

Route::get('photos', function()
{
	$sortby = Input::get('sortby', 'new');
	switch ($sortby) {
		case 'new':
			return Response::eloquent(Photo::order_by('created_at', 'desc')->get());
			break;
		case 'top':
		    $photos =  DB::query('SELECT photos.*, COUNT(photos.id) AS captions
				FROM photos LEFT JOIN captions ON photos.id = captions.photo_id
				GROUP BY photos.id
				ORDER BY captions DESC');

			return Response::json($photos);	
			break;
		case 'random':
			return Response::eloquent(Photo::order_by(DB::raw(''),DB::raw('RAND()'))->get());
			break;
		default:
			return Response::eloquent(Photo::order_by('created_at', 'desc')->get());
			break;
	}
});

That’s it, this is all there is to passing parameters during Backbone fetch calls!

Enjoy

Liked it? Take a second to support Maks Surguy on Patreon!