A simple Rails 3 and Backbone.js screencast

by Andrew Gertig on May 15, 2011

This is a quick screencast on how to use Backbone.js with a Ruby on Rails application. The screencast covers the simple example of submitting a form, saving the data to the database, and displaying the records in a table. The repo for the backbone-demo app I created for the screencast is on github. [UPDATE: if you are using Backbone 0.5.x make sure you change the word refresh to reset.]

I recently started using Backbone.js and have found it to be extremely useful for keeping my Javascript organized. One of the benefits of using Backbone that I didn’t realize until later is that it makes you start building a RESTful API without you even focusing on that as an outcome. Awesome.

One of the gotchas (which is covered n the Backbone.js site) is that Rails returns a JSON object that looks like this:

{ dog: { name: “Fido”, age: “2″ }}

While Backbone just wants to see:

{ name: “Fido”, age: “2″ }

In order to get Rails to play well with Backbone you need to tell Rails not to return the root in the JSON return. This is accomplished by adding the following line to an initializer.

ActiveRecord::Base.include_root_in_json = false

Backbone.js is really great stuff and I look forward to using it more in my applications. You should check it out if you haven’t already.

  • Kristian Mandrup

    Very Cool :) Now that the new Rails 3.1 is out (RC) with the new asset structure, it would be nice with a port of this example to Rails 3.1 rc using this new layout (and sprockets etc.) Then also have a backbone-rails gem like the jquery-rails that includes the necessary artifacts into your app. Then also have special backbone generators that are hooked onto the Rails generators. Wow! I will look into this ASAP :)
    Please anyone who is interested in helping to get this tools done, contact me at: kmandrup on gmail.
    Cheers!  

  • olivier nguyen

    Hi, I have 2 questions as I am trying to wrap up my head around backbone: 

    1. Did you type all the js code or were u able to generate some code automatically like rails’s scaffolding cmd does?

    2. The app I am working on at work is not restfull. We use a sort of a Module pattern to keep our JS code organized. I am very interested in backbone but I am not sure if it would be a good fit if once does not have a full RESTful architecture.  Unless I could just use Backbone’s Views, Models, Events and leaving the persistence part away.

    Thx for your video and advice.

    PS: How I wish I could have attended the Rails Conf! 

  • http://andrewgertig.com Andrew Gertig

    Hey Kristian, I plan to do a version with Rails 3.1 once it’s official. Also, I put together a gem for adding the necessary files. Here https://github.com/AndrewGertig/backbonejs-rails

  • http://andrewgertig.com Andrew Gertig

    Hey Oliver,

    1. I had to type it all. No generators out there yet that I know of.

    2. I think you are right that it would be tough to use backbone in a non Rest architecture, though not impossible.

    Good luck!

  • Kristian Mandrup

    Cool :) Also check out these projects:

    https://github.com/codebrew/backbone-rails
    https://github.com/kristianmandrup/backbone-rails
    https://github.com/kristianmandrup/backbone-rails-rocks

    We are attempting to define some nice generators and setup scripts to configure a Rails 3 project for use with Backbone just like you ;) However still needs some thoughts, rework and experimentation.
    Let’s join forces!

  • http://twitter.com/jlebrech Joseph Le Brech

    How do you add Actions to the row?

  • Guest

    Hi,

       Thanks for taking the time to make this tutorial, and the associated gem.  I think it could be a little more instructive though, if instead of dumping the dogs.js on us, you develop it incrementally so we can see how each part of backbone works, and works with rails step by step, seeing each change  as you develop it.  After watching the video, I still can’t sit and rationalize how to do something like this on my own

    Thanks

  • http://andrewgertig.com Andrew Gertig

    Hey, I agree that saying I have already created the dogs.js file is not ideal, I did so to keep the screencast shorter and hoped that the explanation would suffice. I do agree that walking through it step by step is more useful for an absolute beginner. I hope to do a couple more backbone screencasts in the future and will try to do a thorough walkthrough of the basics in one of them.

  • http://profiles.google.com/cbmeeks cb meeks

    Nice screencast.  Thanks.

    One thing I noticed is that if you’re using Rails 3.1 and you put the backbone.js file into your asset pipeline, you get an uncaught exception on “extend”.  Found out it was because Rails 3.1 was building backbone.js BEFORE jquery.  So I just renamed it to z_backbone.js.   :-)

  • http://compositecode.com/ Adron Hall

    Just a thought… could you provide a download for the video?  Would love to download it for offline viewing.  :)

  • http://twitter.com/KevinMonk Kevin Monk

    I may have missed it but I don’t think you mentioned the serializeObject function declaration that you put in application.js

    Very useful tutorial. I appreciate it.

  • Mike Tucker

    Ran into problems using the latest Backbone 0.5.3 (rather than 0.3.3 in the project.) Trying to pinpoint the problem, but if anyone knows please reply :)

  • Mike Tucker

    also ran into this problem. kept retracing the video until i saw this comment.

  • Mike Tucker

    got it. swap the Dogs.bind “refresh” with “reset”

  • http://andrewgertig.com Andrew Gertig

    Good catch, sorry for not updating the post for 0.5, also if Controller is now Router, if you were to add that in.
    Andrew Gertig

  • Yap

    hello

  • Tom Harrison

    Andrew — this was most helpful, thanks!

    A few notes for Rails 3.1 (and actually, mine’s on 3.2):

    * the Rails 3.1 default scaffold now generates respond_to html and json formats, no more XML (ha!)
    * It’s no longer necessary to set `ActiveRecord::Base.include_root_in_json = false` as this is done in a new initializer, wrap_parameters.rb
    * I had to hunt a little for the serializeObject.js code.  It’s here: https://raw.github.com/danheberden/serializeObject/master/jquery.serializeObject.js
    * in the newAttributes method, you need only `return new_dog_form.dog` — I think this is related to the way JSON is handled in Rails 3.1+

    So, it works!  Now I just need to figure out what it all means.  That’s tomorrow :-)

Previous post: