Backbonejs tutorial

So I stumbled around for some time before figuring out the ‘hello world’ tutorial for backbonejs but since it took me more time than expected, I decided to write one myself. The docs are great but are too mind-boggling for a newbie, especially ones who rarely venture into client side frameworks.

As I mentioned, this tutorial wont show you much apart from getting a very very basic backbonejs example working. The code is available on github HERE. I’ve used THIS project as the base. It provides the framework for a basic nodejs-express-twitterbootstrap-jade application but that’s just optional. I have also added a single page version of the code in the repository HERE. This will work equally well in a single page html with required scripts. On top it, i’ve added backbonejs and underscorejs libraries and I was good to go.

The process being followed is something like this :

  1. Show button

  2. attach handlers

  3. invoke action on user input(after button click)

  4. show the user input on page… easy peasy

Edit the ‘views/index.jade’ file to add a button and an ‘ul’(list) element.

Now create a new .js file in ‘public/js/main.js’ and include it in ‘views/index.jade’ so that our view knows where to get the “M”(model) and “C”(controller) for the “V”(view) we just created.

I’ll provide the entire “main.js” here for reference.

I won’t go through the entire file as the code is appropriately  commented.

Line 4 : We create a backbone Model named “Friend”.  Models define the objects on which operations take place. They can have various properties and event handlers associated with them. We provide only one property to this model – ‘name’. The ‘initialize’ method is called whenever a new object of the Model is created.  Here we are setting the ‘name’ property of the model to ‘null’ upon initialization.

Line 12: Create a Collection of  “Friend” Model called “Friends”. To quote from backbone docs – Collections are ordered sets of models. So any event that takes place on any  of the model in the collection also takes place on the collection. HERE is the list of events that are available in backbonejs. Custom events can also be created/fired. Here, upon the initialization of “Friends” collection, associate the “add” event with some function which we’ll define later.

We have now defined the Model and View for this application. Next we move to Controller. The objective is to somehow tell the button to do open a prompt when clicked and upon user input, create a new ‘li’ and show the input.

Line 22: Initialize the View and its behavior.  All the views are associated with a DOM element specified in the ‘el’ property of the view. Here we bind this View to the button on line 23. On line 25, we create a local ‘friends’ object(instance of the already created “Friends” Collection) for this view and pass this view in its initializer.

Line 27: Attach events with this view. Here we attach the “showPrompt()” method  to the “click” event for the button.

Line 31:In ” showPrompt()” method, show the user a prompt to enter a friend name. Upon receiving the name, create a new “Friend” object with it (Line 36) and then add that object to the “Friends” collection(Line 39). This will now trigger the “add” event we specified in Line 17 and fire the specified function there.

Line 43 :  Add a new “li” with the name that user entered to the friends list.

Line 49 : (Finally)Initialize the view.

That’s about it. After running “node app.js” you should be able to run the example. Or simply go in the “plainHtml” folder and view the “index.js” file in browser.

Share Comments
comments powered by Disqus