main.js for Library app built using Backbone

Date: 2014, Jan.

Self Executing anonymous passing in jQuery

(function ($) {

Storing an Array of books for the library app. In this example we will not interact with the server to fetch data.

    var books = [{title:"JS the good parts", author:"John Doe", releaseDate:"2012", keywords:"JavaScript Programming"},
        {title:"CS the better parts", author:"John Doe", releaseDate:"2012", keywords:"CoffeeScript Programming"},
        {title:"Scala for the impatient", author:"John Doe", releaseDate:"2012", keywords:"Scala Programming"},
        {title:"American Psyco", author:"John Doe", releaseDate:"2012", keywords:"Novel Slasher"},
        {title:"Eloquent JavaScript", author:"John Doe", releaseDate:"2012", keywords:"JavaScript Programming"}];

Init the model. A Book. Lets set a default for the cover image. You know, just in case.

    var Book = Backbone.Model.extend({

Define the collection. The primary argument will be the type of Collection. i.e. A book, Which makes this collection a library entity.

    var Library = Backbone.Collection.extend({

Reusable Book view. We Define a book view consisting of the following items
1. A tagName - The holder, can be anything/Div is default
2. A className - Optional
3. Template - To render the UI from
4. render() - The magic logic.

    var BookView = Backbone.View.extend({
If you did see the markup, we have a script tag 
which consists of the skeleton/template for the
Book View. This is extracted and cached here.
        render:function () {
Using underscore and converting the html to 
a template.
            var tmpl = _.template(this.template);
this.el is what we defined in tagName. use $el 
to get access to jQuery html() function
Pass the model to the Template, and the template
will populate the markup based on the model.
(neat ha..)
            return this; // Chaining things

Library view uses pieces of Book view to build itself.

    var LibraryView = Backbone.View.extend({

Init method, get the books collections & trigger the render method.

            this.collection = new Library(books);

Using underscore's each method, we iterate through all the books. Then call a method to render each item to the UI.

        render: function(){
            var that = this;
            _.each(this.collection.models, function(item){

renderBook, internally calls the Book View and passes a model to it. This will spit out the view for each book, which gets appended to the Library View.

            var bookView = new BookView({
                model: item

The Controller/Router - Lets define some routes, one to view all the books in library and one to view a selected book.

    var LibraryRouter = Backbone.Router.extend({

ex url: <scheme>://<host>:<port>/<path>&<parameters>?<query>#<fragment> ''
If nothing is present as part of the fragment/Query, we show the complete library 'View/:id' : Match any route that has a 'View' as part of the fragment and anything after that as ID

        routes: {
            '': 'showLibrary',
            'View/:id': 'view' // #View/1

        showLibrary: function (id) {
Call the library view 
            var libraryView = new LibraryView();

        view: function (id) {

Call the individual book view

           var book = new Book({
         			 title:"Some title",
      				author:"John Doe",
          keywords:"JavaScript Programming"

      bookView = new BookView({
          model: book


    var appRouter = new LibraryRouter();