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, I'm RJ! For more learnings about software and management, find me @rjzaworski or sign up for my semi-regular newsletter.

Let’s keep in touch

Send me timely updates on software, product, and process.