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.
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.
Recovered companions
Historical source code and transcript text. Live Gist files may differ from the original embedded revisions; no archived code is executed.
video-transcript.txt
YouTube transcript companion, not blog body or recovered video. Audio accuracy and playback not verified.
Backbone.js and Rails 3 demo [HD]
Source: https://www.youtube.com/watch?v=PtcXl90bngk
Channel: gertig (@AndrewGertig)
Channel URL: https://www.youtube.com/@AndrewGertig
Published: May 16, 2011
Duration displayed: 11:12
Retrieved: October 12, 2026 (UTC)
PROVENANCE AND LIMITS
This is the available YouTube transcript captured from the video page's Show transcript panel. It is a companion to the recovered blog article, not the article body. All 81 available timestamped segments and 7 displayed chapter headings are preserved, from 0:01 through the closing segment at 11:05. Wording, apparent recognition errors, capitalization, and punctuation are preserved as displayed; timestamp labels are normalized for readability. This transcript has not been checked against audio. Actual playback could not be verified: the cloud browser player remained at 0:00 with a loading spinner. No video was downloaded.
VIDEO DESCRIPTION
A simple example of how to use Backbone.js to submit a Rails generated form. Covers a few gotchas to be aware of when using Backbone.js with Rails.
TRANSCRIPT
Chapter 1: Project setup
[0:01] okay so this is a screencast about backbone.js and Ruby on Rails so I'm going to catch you up to where I am what
[0:08] I've done is I have added the jQuery rails Jam so that I could replace prototype with jQuery I have scaffolded
[0:15] a dog model and I have um added in the dogs. JS file so I've already built the
[0:22] backbone um application I'm just going to kind of walk you through it and I've got it kind of working and I'm going to kind of show you what it looked like
[0:30] before and then show you what it looks like using it okay so these are the steps I walk through I'm using 192 with
[0:37] rvm I've got a app called backbone demo you can see there and then you can see I did a
[0:46] bundle install did my jQuery install and then I did my scaffold of a dog who has a name and an
[0:56] age and then did my RB migrate so that's kind of where I'm at right now Now you kind of catch up if you would like to
Chapter 2: Rails configuration
[1:05] okay this is my gem file dogs controller this is the generic scaffolded dogs controller so what we're going to do
[1:14] because backbone likes to see stuff in the format of Json I'm going to swap out XML for Json
[1:22] here so we'll just do a replace all you can see now it says Json okay
[1:31] save that so a little gacha here and this is one of the big gotas with um using backbone with rails is that backbone
[1:40] likes to see things without nested attributes so you're going to tell rails in an
[1:48] initializer so I've got this initializer that I've named backbone. RB under my config telling it to not include the
[1:57] root in the Json response okay so now for the purpose of this let's
Chapter 3: Rendering initial data
[2:05] just kind of show you what it looks like this is just a regular old rails app just with one scaffolded
[2:12] model and you can kind of see here let's create a new dog Stella is three create the dog great
[2:22] that works okay yep okay so now what we're going to do
[2:29] is I'm going to change this index file really not adding in much at all
[2:41] really I'll show you what I've added in here so this section is not changed that's not new that's what it looked like before so
Chapter 4: Integrating Backbone.js
[2:49] what I've added in is the form partial and I've put created a div with ID of
[2:56] dogs app which wraps all of that and then I've added this piece in here which is listing via backbone so all it is is
[3:06] a table with a header row and then down here so this is closing the div for dog
[3:14] app here is the template for the I can has templating and you can see here I'm
[3:22] adding in a row with cell name and age okay and this
[3:30] is type HTML so we'll go here and
[3:38] refresh and did not like that because I have not added in the ability to add a
[3:46] new dog okay all right that should fix
[3:57] that okay so you can see here this is the form from the form
[4:03] partial and so this would work without backbone this would just allow you to create a new dog from the index
[4:13] page before we do that let's kind of walk through the dogs. JS file this should be pretty quickly okay
Chapter 5: Backbone components
[4:21] so backbone has models views collections sorry if you can hear the sirens in the background I'm in Baltimore for rails
[4:29] conon got the return for the URL will be dogs
[4:38] plus the ID of that dog if it exists and if not just the dogs
[4:47] index defaults don't worry about that I haven't really used that much yet this doesn't save this default to the model
[4:56] yet haven't gotten that piece to work yet just yet okay so this is a very simple dogs collection you always use collections
[5:04] with models in backbone this tells it what the model is for the
[5:11] collection and then this is how you initialize it so or create
[5:19] it so then you have your view okay so this is your your view of the template is what this is so this has a tag name
[5:29] of table row so you saw in the in the template that it was two cells with name and age and so those are going to be
[5:36] added into the tag name table row okay and so when the view is created
[5:43] or when a new one is created it renders the dog
[5:50] object as the Json object and that is inserted into the dog template this is the ID of that script
[5:59] tag see that here dog template that's how I can has
[6:07] does it okay and that's inserted into the HTML
[6:15] okay so the application view this is the main application View for the dogs.jpg
Chapter 6: App view and interactivity
[6:26] app and so that is this div that wraps everything okay close there open there
[6:34] okay div Dog app this is binding to events so on the
[6:41] submit event on the form with ID of new dog we're going to call the create dog function which is
[6:49] something that we've created down here okay let's first walk through on the initialization of the app it binds the
[6:56] add one and add all functions to this and then on an ad event a refresh event or
[7:05] an all event so any event these are bound to the dog's collection okay so if
[7:12] there if something is added to the dog's collection then the add one function is called so forth dogs. fetch fetches a
[7:22] backbone method to get the model from the server to get the model attributes
[7:29] okay we can see what add one does here add one creates the view variable which is creates a new dog view
[7:38] which we had created above and passes it the model and the dog as the attribute for the
[7:45] model so then this will append the row to the dog table which is the the
[7:54] backbone table that we added in here so table ID dog
[8:01] table and it will append that row which is created by the ien has
[8:11] template okay so when the submit event occurs it
[8:17] calls create dog we've got the E here for the event so the event prevent
[8:25] default is a JavaScript method to prevent the normal um course of events essentially
[8:33] so this prevents the form from submitting normally and then we're going to go get the attributes from the form
[8:40] and so that goes up here and calls this function you can see it returns an
[8:47] object of this form with the name new dog form and so this is how rails creates or has this is the name
[8:57] attribute for that input so we can actually we'll look at that real quick so let's inspect
[9:05] that okay you can see name is equal to dog and then square brackets name
[9:13] okay same with age and then once we've got the parameters we will create that dog We'll add it we'll create on the
[9:22] dog's collection what that does is it does it's a convenience method from backbone that saves it to the model and then it will also add it to the
[9:31] collection okay and this is where we start the backbone at okay so let's go in here and refresh just to be
Chapter 7: Final demonstration
[9:41] save so let's add Stella again so now when I click create dog it should dynamically add
[9:48] Stella right here there she is and then if I refresh the page then see displayed
[9:56] with rails and all this stuff should work as normal Al Stella
[10:05] R okay there we go updates it all we can add another one Max six there you go and
[10:15] refresh and you see it there and one more thing to show you before I finish is the files that were used
[10:24] here used backbone I can has for templating Jason two for Json and
[10:31] underscore which is the dependency of backbone and here this where they were
[10:41] included jqu UJS is the new replacement for rails. JS if you use the jQuery rails
[10:48] gam and there you see okay that's pretty much it guys if you have any uh criticism or any um suggestions and
[10:57] anything I could do to you know improve this make things a little bit spelter please let me know all right hopefully
[11:05] I'll see some of you guys this week have a good one