Parsing forms with Backbone.js

  • 1/30/2012

Take a form that’s indexed in the Rails vogue.

<form id="nametagForm">
  <input type="text" name="nametag[name]" value="Barney Rubble" /><br />
  <input type="text" name="nametag[role]" value="Neighbor" /><br />
  <input type="text" name="nametag[saying]" value="Huh Huh Huh" /><br />
  <input type="text" name="nametag[family_attributes][name]" value="Betty Rubble" />

Wouldn’t it be nice to be able to manipulate its content directly through Backbone.js? With just a few additions to Backbone.View, using a model to populate a form or retrieve the form’s content becomes a trivial task:

_.extend(Backbone.View.prototype, {

  parse: function(objName) {
     var self = this,
        _recurse_form = function(object, objName) {
          _.each(object, function(v,k) {
             if (v instanceof Object) {
                object[k] = _recurse_form(v, objName + '[' + k + '_attributes]');
             } else {
                object[k] = self.$('[name="'+ objName + '[' + k + ']"]').val();
          return object;
     this.model.attributes = _recurse_form(this.model.attributes, objName);

  populate: function(objName) {
     var self = this,
        _recurse_obj = function(object, objName) {
          _.each(object, function (v,k) {
             if (v instanceof Object) {
                _recurse_obj(v, objName + '[' + k + '_attributes]');
             } else if (_.isString(v)) {
                self.$('[name="' + objName + '[' + k + ']"]').val(v);
     _recurse_obj(this.model.attributes, objName);

Just for the sake of demonstration, let’s get Barney out of the form and move someone else in. A really basic model and the corresponding view for Barney’s neighbor might look something like this:

var nametag = Backbone.Model.extend({
  defaults: {
     name: 'Fred Flintstone',
     role: 'Protagonist',
     saying: 'Yabba Dabba Do!',
     family: {
        name: 'Wilma Flintstone'

var nametagView = Backbone.View.extend({
  initialize: function() {

Finally, run a quick demonstration to make sure everything worked (hint: console.log(myModel.attributes);)

  var myModel = new nametag();
  var myView = new nametagView({
     el: $('#nametagForm'),
     model: myModel


Check out the demonstration here.

Update: I’ve been developing a jQuery plugin to help parse data in the DOM into javascript applications. Check it out!

Hey, it's RJ—thanks for reading! If you enjoyed this post, would you be willing to share it on Twitter, Facebook, or LinkedIn?