Learning Backbone – BackboneJS Tutorials and Examples

I’m learning BackboneJS, Underscore and related coding strategies.
I will share with you my experience on this stuff publishing a set of full documented examples in a GitHub repository.

» Go to the Learning Backbone repo on GitHub! «

001. Hello World

Display a bouncing “hello world” string implementing a basic Backbone app.

002. Hello World – View

It uses a Backbone’s View object to handle the “hello world” string plus belong to a jQuery plugin to expose the bouncing effect.

003. Hello World – Model

This is the first interactive example.
Ask user’s name and uses a Backbone Model to write it down to a compiled (Underscore) template.

004. Handling Events

Configure a Backbone’s View object to handle some basic events on buttons, links, input and write some log informations responding to these events.

Log messages are created by compiling some Backbone’s View objects with custom events data.

005. Syncing Models with Views

In a real world application you may need to bind a model’s data updates to one or more views to be sychronized with.

If you have a “person” with a name and surname and you display this data in more than one place (people lists and person detalis) you may need to update you interface according to the model’s data updates.

This example bind a FormView to fill a PersonModel then bind PersonModel’s updates to two different “ShowViews” that display PersonModel’s data in different ways.

006. Model Validation

In a real world application you may need to validate model’s data who came form a user compiled form.

This app experiment a simple form validation focusing on how events happens and how different objects (views, model) acts together to ensure data integrity.

007. Underscore Template

Playing with Underscore templates from different sources: hard coded into models, defined into a script block, fetched from a template file via RequestJS text! plugin or fetched from a DOM html content.

008. Backbone Collection Object

Playing with Backbone Collection Object. Loads some tweets with JsonP, store it into a TweetCollection of TweetModel(s) then run a View that updates according to the collection.

009. TwitterSearch App

This demonstrative App allow user to search Twitter and display matching Tweets. It use Dependency and Observe  patterns to make objects talks together.


  • Pingback: Backbone e Underscore Framework Tutorial - Esempi pratici di sviluppo | Consulenza-Web.com

  • Pingback: Quora

  • Pingback: How to fetch a Template from a DOM html() content | MovableApp.com

  • Pingback: BackboneJS: how to use HTML Node as underscoreJS Template | MovableApp.com

  • Pingback: BackboneJS Tutorial: TwitterSearch App in Backbone! | Consulenza-Web.com

  • Pingback: Quora

  • Antonio Suazo

    Good work monsieur!
    Your tutorial series turned out being the most clean and fun aproach from all over the web (and I searched a lot). Thanks for that.
    Just a newbie question: I’ve got a very tiny array generated in ‘view1′ and I want to use it within ‘view2′. Do I need to create a model just for that or there is a way to handle ‘globals’?. Thanks again beforehand!

    • mpeg

      Hi Antonio,
      I really appreciate your comment.
      Please share your opinion to the world :-)

      Globals… there is so much ways to handle globals.

      You can create your custom global namespace where to put your app-related globals:

      window.MyApp = {
      appRelatetGlobal: ‘foo’,
      anoterAppGlobal: function() { … }

      to create a Model or a Collection does not solve your problem… you just add a wrapper to your array but it’s name need to be shared cross multiple objects anyway!

      I’m planning to write a Backbone extension to wrap some Application related things, best practices, shortcuts… Something inspired by the Sencha Touch Application approach… stay tuned!

      • Antonio Suazo

        You are the man of the year!!

        Just for the record: in bootstrap I declaredvar gList = { global1: true };
        and the passing gList as a parameter to the render function:view.render(gList);
        Now I can access gList.global1 whitin view and have a actualized namespace available to any view. Period.

        Dude, the structure you’re proposing here can be used in so many fields..This goes directly to google+.
        You made my day, seriously. Many thanks.

  • Pingback: javascript forum

  • Gail Long

    Thank you, thank you, thank you! You don’t know how many examples I’ve downloaded that either don’t work or are just hard to follow.

    • mpeg

      you’re welcome!
      my intention is to provide an easy to follow cycle of examples to startup with backbone!

      please share this page!

  • pixelBender67

    I don’t understand what you are validating against in your example, I enter number space, even leave the form empty and the form still submits. The only time it wont submit is if you enter nothing, than I think it’s not backbone doing the css

    • mpeg

      It’s just a simple example, it validates fields to do not be empty. You may have some Javascript errors, I ran the example in all modern browser (I mean no explorer at all!) and it works fine.

      However feel free to put hands on the code and submit a PR!

      • pixelBender67

        I’ll try, time is not my friend these days, but when I have some free time I will.