We’ve recently started using BackboneJS on a couple of projects to help create more responsive UIs and avoid having to deal with a tangled mess of jQuery callbacks, ad-hoc Javascript templating, and difficult code re-use. On the whole, I’ve been impressed with Backbone and I think it’ll make a valuable asset in our toolbox.
Anyway, one of the core concepts of Backbone is that client side models will be automatically synced with their server side counterparts via RESTful AJAX calls. Stripping away the buzzword bingo, what that means is that when a Backbone model is created in the UI a AJAX POST request is initiated to create that model, updates trigger a PUT, and destroying a model will cause a DELETE.
Conceptually, this system makes a lot of sense and it fits nicely with how data is structured in most apps. Unfortunately, it falls apart when there isn’t a one to one correspondence between frontend Backbone models and your backend persistence layer.
For example, say on the frontend you wanted to allow a user to enter and edit the various languages she spoke. Naturally, you could define a Backbone “Language” model, managed by a “LanguageList” Collection, and finally drawn with a “LanguageView” View. This would work great but unfortunately on the backend you’re storing the list of languages the user speaks in a single row - say as a CSV list for arguments sake. At this point, you’d be stuck because Backbone would be pushing AJAX requests per model and your backend would have no way to combine the languages into a CSV list.
In this instance it seems like you really want “JSON over REST”, in the sense that you want to push update events for several models on a single request. The Backbone FAQ mentions this technique but unfortunately doesn’t elaborate on specifically how to achieve this behavior.
Batch operations on Models are common, but often best handled differently depending on your server-side setup. Some folks don’t mind making individual Ajax requests. Others create explicit resources for RESTful batch operations: /notes/batch/destroy?ids=1,2,3,4. Others tunnel REST over JSON, with the creation of “changeset” requests:
Google’ing around I stumbled across this StackOverflow answer - http://stackoverflow.com/questions/11298152/how-to-do-batch-operations-in-backbone-js-via-tunneling-rest-over-json which seems to have been removed. The answer basically suggested embedding a Collection within a Model so that Backbone effectively passed a JSON array to your REST endpoint.
Unfortunately, the answer didn’t provide a concrete example either so here is a stripped down version of what I ended up using.
var Language = Backbone.Model.extend({
defaults: function() {
return {
languageName: "",
};
},
initialize: function() {
},
save: function() {
LanguagesCollection.at(0).save();
},
destroy: function(options) {
options = options ? _.clone(options) : {};
var model = this;
var success = options.success;
model.trigger('destroy', model, model.collection, options);
LanguagesCollection.at(0).save();
}
});
var LanguageList = Backbone.Collection.extend({
model: Language,
});
var LanguageCollection = Backbone.Model.extend({
defaults: function() {
return {
languages: new LanguageList()
};
},
parse: function(response) { }
});
var LanguageCollectionList = Backbone.Collection.extend({
model: LanguageCollection,
});
var LanguageView = Backbone.View.extend({
tagName: "div",
template: _.template($('#language-item-template').html()),
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
},
});
var LanguagesAppView = Backbone.View.extend({
el: $("#languageList"),
initialize: function() {
LanguagesCollection.add([{}]);
LanguagesCollection.at(0).get("languages").bind('add', this.addOne, this);
LanguagesCollection.at(0).get("languages").bind('all', this.render, this);
},
addOne: function(loc) {
var v = new LanguageView({
model: loc
});
this.$el.append(v.render().el);
}
});
LanguagesCollection = new LanguageCollectionList();
var LanguagesAppView = new LanguagesAppView;
Basically, “Language” is the “real” model which is managed by the “LanguageList” collection. Then, “LanguageCollection” is the container model which holds a single “LanguageList” collection and is subsequently managed by the “LanguageCollectionList”.
If you look through the code, basically the Views are bound to events on ‘LanguagesCollection.at(0).get(“languages”)’ which is a LanguageList object.
The other thing to note is that Language.destroy() function is updated to not make an AJAX DELETE call but instead trigger a save on the collection.
Also, LanguageCollection.parse() is defined as an empty function because ‘LanguagesCollection.at(0).get(“languages”)’ needs to remain a Backbone object and not be converted into the regular JSON which would come back from the server. The caveat here is that if you need to set an ID after a POST, you’ll need to update parse() to process the JSON and then update the corresponding models within the collection.
Anyway, I’m still a Backbone novice so any input or insight is more than welcome. I’d also love to know if theres a more straightforward way to address this. A couple of posts mentioned overriding Backbone.sync but that wasn’t feasible for me because I had other Backbone models on the page which needed to update using the regular REST pattern.
Update 7/20/2012
As pointed out by Aria below, it’s actually possible to override the “sync” method per model to achieve this JSON over REST behavior. Overall, its probably a cleaner solution since it avoids introducing the complexity of collections contained in models simply to get the JSON over REST behavior.
Here’s an example implementation of a sync function that produces the desired results:
var Language = Backbone.Model.extend({
defaults: function() {
return {
languageName: "",
};
},
initialize: function() {
},
url: "echoBackbone.php",
sync: function(method, model, options){
var methodMap = {
'create': 'POST',
'update': 'PUT',
'delete': 'DELETE',
'read': 'GET'
};
var type = methodMap[method];
// Default options, unless specified.
options || (options = {});
// Default JSON-request options.
var params = {type: type, dataType: 'json'};
// Ensure that we have a URL.
if (!options.url) {
params.url = this.url || urlError();
}
// Don't process data on a non-GET request.
if (params.type !== 'GET' && !Backbone.emulateJSON) {
params.processData = false;
}
// NEW - the juicy bits to combine all the models in this collection
var collection = [];
model.collection.each( function(e, i, l){
collection.push( e.toJSON() );
});
params.data = JSON.stringify(collection);
// Make the request, allowing the user to override any Ajax options.
return $.ajax(_.extend(params, options));
}
});
NOTE: Almost all of that code is copied directly out of Backbone.js, the exception is the following block which collects up all the models in the current model’s collection and then adds it into the “data” field:
var collection = [];
model.collection.each( function(e, i, l){
collection.push( e.toJSON() );
});
params.data = JSON.stringify(collection);
Happy Backbone’ing!
