Backbone Tutorials

Organizing your application using Modules (require.js)

2011-10-10T00:00:00+10:00

Organizing your application using Modules (require.js)

Unfortunatly Backbone.js does not tell you how to organize your code leaving many developers in the dark regarding how to load scripts and lay out their development enviroments.

This was quite a different decision to other Javascript MVC frameworks who were more in favor of setting a development philosophy.

Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.

This tutorial will get you started on combining Backbone.js with AMD (Asynchronous Module Definitions).

What is AMD?

Asynchronous Module Definitions designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around AMD, seeing it as the future of modular Javascript development.

This tutorial will use Require.js to implement a modular and organized Backbone.js.

I highly recommend using AMD for application development

Quick Overview

Modular
Scalable
Compiles well(see r.js)
Market Adoption( Dojo 1.6 converted fully to AMD )

Why Require.js?

Require.js has a boastful community and is growing rapidly. James Burke the author is married to Require.js and responds to user feedback always. A leading expert in script loading, he is also a contributer to the AMD specification.

Follow @jrburke

Getting started

To easily understand this tutorial you should jump straight into the example code base.

Example Codebase

Example Demo

The tutorial is only loosely coupled with the example and you will find the example to be more comprehensive.

If you would like to see how a particuliar use case would be implemented please visit the Github page and create an issue.(Example Request: How to do nested views).

The example isn’t super fleshed out but should give you a vague idea.

Example File Structure

There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirroed in file structure. Collections and Models aren’t categorized into folders kind of like an ORM.

/* File Structure
├── imgs
├── css
│   └── style.css
├── templates
│   ├── projects
│   │   ├── list.html
│   │   └── edit.html
│   └── users
│       ├── list.html
│       └── edit.html
├── js
│   ├── libs
│   │   ├── jquery
│   │   │   ├── jquery.min.js
│   │   │   └── jquery.js // jQuery Library Wrapper
│   │   ├── backbone
│   │   │   ├── backbone.min.js
│   │   │   └── backbone.js // Backbone Library Wrapper
│   │   └── underscore
│   │   │   ├── underscore.min.js
│   │   │   └── underscore.js // Underscore Library Wrapper
│   ├── models
│   │   ├── users.js
│   │   └── projects.js
│   ├── collections
│   │   ├── users.js
│   │   └── projects.js
│   ├── views
│   │   ├── projects
│   │   │   ├── list.js
│   │   │   └── edit.js
│   │   └── users
│   │       ├── list.js
│   │       └── edit.js
│   ├── router.js
│   ├── app.js
│   ├── main.js  // Bootstrap
│   ├── order.js //Require.js plugin
│   └── text.js  //Require.js plugin
└── index.html

*/

To continue you must really understand what we are aiming towards as described in the introduction.

Bootstrapping your application

Using Require.js we define a single entry point on our index page.
We should setup any useful containers that might be used by our Backbone views.

Note: The data-main attribute on our single script tag tells Require.js to load the script located at “js/main.js”. It automatically appends the “.js”

<!doctype html>
<html lang="en">
<head>
	<title>Jackie Chan</title>
	<!-- Load the script "js/main.js" as our entry point -->
	<script data-main="js/main" src="js/libs/require/require.js"></script>
</head>
<body>

<div id="container">
  <div id="menu"></div>
  <div id="content"></div>
</div>

</body>
</html>

You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a CDN ensuring that everything that can be cached, will be.

What does the bootstrap look like?

Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.

In the below example we configure Require.js to create shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.

Due to the nature of these libraries implementations we actually have to load them in order because they each depend on each other existing in the global namespace(which is bad but is all we have to work with).

Hopefully if the AMD specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvience the bootstrap is not as intuitive as it could be, I hope to solve this problem in the near future.

We also request a module called “app”, this will contain the entireity of our application logic.

Note: Modules are loaded relativly to the boot strap and always append with “.js”. So the module “app” will load “app.js” which is in the same directory as the bootstrap.

// Filename: main.js

// Require.js allows us to configure shortcut alias
// There usage will become more apparent futher along in the tutorial.
require.config({
  paths: {
    jQuery: 'libs/jquery/jquery',
    Underscore: 'libs/underscore/underscore',
    Backbone: 'libs/backbone/backbone'
  }

});

require([

  // Load our app module and pass it to our definition function
  'app',

  // Some plugins have to be loaded in order due to there non AMD compliance
  // Because these scripts are not "modules" they do not pass any values to the definition function below
  'order!libs/jquery/jquery-min',
  'order!libs/underscore/underscore-min',
  'order!libs/backbone/backbone-min'
], function(App){
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});

How should we lay out external scripts?

Any modules we develop for our application using AMD/Require.js will be asynchronously loaded.

We have a heavy dependency on jQuery, Underscore and Backbone, unfortunatly this libraries are loaded synchronously and also depend on each other existing in the global namespace.

Below I propose a solution(until these libraries allow themselves to be loaded asynchronously) to allow these libraries to be loaded properly(synchronously) and also removing themselves from global scope.

// Filename: libs/jquery/jquery.js

define([
// Load the original jQuery source file
  'order!libs/jquery/jquery-min'
], function(){
  // Tell Require.js that this module returns a reference to jQuery
  return $;
});

// Filename: libs/underscore/underscore
// As above lets load the original underscore source code
define(['order!libs/underscore/underscore-min'], function(){
  // Tell Require.js that this module returns  a reference to Underscore
  return _;
});

 // Filename: libs/backbone/backbone
 // Finally lets load the original backbone source code
define(['order!libs/backbone/backbone-min'], function(){
  // Now that all the orignal source codes have ran and accessed each other
  // We can call noConflict() to remove them from the global name space
  // Require.js will keep a reference to them so we can use them in our modules
  _.noConflict();
  $.noConflict();
  return Backbone.noConflict();
});

A boiler plate module

So before we start developing our application, let’s quickly look over boiler plate code that will be reused quite often.

For convience sake I generally keep a “boilerplate.js” in my application root so I can copy it when I need to.

//Filename: boilerplate.js

define([
  // These are path alias that we configured in our bootstrap
  'jQuery',     // lib/jquery/jquery
  'Underscore', // lib/underscore/underscore
  'Backbone'    // lib/backbone/backbone
], function($, _, Backbone){
  // Above we have passed in jQuery, Underscore and Backbone
  // They will not be accesible in the global scope
  return {};
  // What we return here will be used by other modules	
});

The first argument of the define function is our dependency array, we can pass in any modules we like in the future.

App.js Building our applications main module

Our applications main module should always remain quite light weight. This tutorial covers only setting up a Backbone Router and initializing it in our main module.

The router will then load the correct dependencies depending on the current URL.

// Filename: app.js
define([
  'jQuery', 
  'Underscore', 
  'Backbone',
  'router', // Request router.js
], function($, _, Backbone, Router){
  var initialize = function(){
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  }

  return { 
    initialize: initialize
  };
});

// Filename: router.js
define([
  'jQuery',
  'Underscore',
  'Backbone',
  'views/projects/list',
  'views/users/list'
], function($, _, Backbone, Session, projectListView, userListView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      '/projects': 'showProjects',
      '/users': 'showUsers',
      
      // Default
      '*actions": "defaultAction'
    },
    showProjects: function(){
      // Call render on the module we loaded in via the dependency array
      // 'views/projects/list'
      projectListView.render();
    },
      // As above, call render on our loaded module
      // 'views/users/list'
    showUsers: function(){
      userListView.render();
    },
    defaultAction: function(actions){
      // We have no matching route, lets just log what the URL was
      console.log('No route:', actions);
    }
  });

  var initialize = function(){
    var app_router = new AppRouter;
    Backbone.history.start();
  };
  return { 
    initialize: initialize
  };
});

Modularizing a Backbone View

Backbone views most usually always interact with the DOM, using our new modular system we can load in Javascript templates using Require.js text! plugin.

// Filename: views/project/list
define([
  'jQuery',
  'Underscore',
  'Backbone',
  // Using the Require.js text! plugin, we are loaded raw text
  // which will be used as our views primary template
  'text!templates/project/list.html'
], function($, _, Backbone, projectListTemplate){
  var projectListView = Backbone.View.extend({
    el: $('#container'),
    render: function(){
      // Using Underscore we can compile our template with data
      var data = {};
      var compiledTemplate = _.template( projectListTemplate, data );
      // Append our compiled template to this Views "el"
      this.el.append( compiledTemplate );
    }
  });
  // Our module now returns an instantiated view
  // Sometimes you might return an un-instantiated view e.g. return projectListView
  return new projectListView;
});

Javascript templating allows us to seperate the design from the application logic placing all our html in the templates folder.

Modularizing a Collection, Model and View

Now we put it altogether by chaining up a Model, Collection and View which is a typical scenairo when building a Backbone.js application.

First off we will define our model

// Filename: models/project
define([
  'Underscore',
  'Backbone'
], function(_, Backbone){
  var projectModel = Backbone.Model.extend({
    defaults: {
      name: "Harry Potter"
    }
  });
  // You usually don't return a model instantiated
  return projectModel;
});

Now we have a model, our collection module can depend on it. We will set the “model” attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.

“Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.”

// Filename: collections/projects
define([
  'Underscore',
  'Backbone',
  // Pull in the Model module from above
  'models/project'
], function(_, Backbone, projectModel){
  var projectCollection = Backbone.Collection.extend({
    model: projectModel
  });
  // You don't usually return a collection instantiated
  return new projectCollection;
});

Now we can simply depend on our collection in our view and pass it to our Javascript template.

// Filename: views/projects/list
define([
  'jQuery',
  'Underscore',
  'Backbone',
  // Pull in the Collection module from above
  'collections/projects',
  'text!templates/projects/list
], function(_, Backbone, projectsCollection, projectsListTemplate){
  var projectListView = Backbone.View.extend({
    el: $("#container"),
    initialize: function(){
      this.collection = new projectsCollection;
      this.collection.add({ name: "Ginger Kid"});
      // Compile the template using Underscores micro-templating
      var compiledTemplate = _.template( projectsListTemplate, { projects: this.collection.models } );
      this.el.html(compiledTemplate); 
    }
  });
  // Returning instantiated views can be quite useful for having "state"
  return new projectListView;
});

Conclusion

Looking forward to feedback so I can turn this post and example into quality references on building modular Javascript applications.

Get in touch with me on twitter, comments or github!

Relevant Links

Organizing Your Backbone.js Application With Modules

Author

Thomas Davis

Contributors

None

Why would you use Backbone.js?

2011-02-01T00:00:00+10:00

Why do you need Backbone.js?

Building single-page web apps or complicated user interfaces will get extremely difficult by simply using jQuery or MooTools. The problem is standard JavaScript libraries are great at what they do – and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.

I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.

So how does Backbone.js help?

Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.

Relevant Links

Author

Thomas Davis

Contributors

What is a model?

2011-01-29T00:00:00+10:00

What is a model?

Across the internet the definition of MVC is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

So for the purpose of the tutorial let’s create a model.

    Person = Backbone.Model.extend({
        initialize: function(){
            alert("Welcome to this world");
        }
    });
    
    var person = new Person;

So initialize() is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.

Setting attributes

Now we want to pass some parameters when we create an instance of our model.

    Person = Backbone.Model.extend({
        initialize: function(){
            alert("Welcome to this world");
        }
    });
    
    var person = new Person({ name: "Thomas", age: 67});
    delete person;
    // or we can set afterwards, these operations are equivelent
    var person = new Person();
    person.set({ name: "Thomas", age: 67});

So passing a javascript object to our constructor is the same as calling model.set(). Now that these models have attributes set we need to be able to retrieve them.

Getting attributes

Using the model.get() method we can access model properties at anytime.

    Person = Backbone.Model.extend({
        initialize: function(){
            alert("Welcome to this world");
        }
    });
    
    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
    
    var age = person.get("age"); // 67
    var name = person.get("name"); // "Thomas"
    var children = person.get("children"); // ['Ryan']

Setting model defaults

Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.

    Person = Backbone.Model.extend({
        defaults: {
            name: 'Fetus',
            age: 0,
            children: []
        },
        initialize: function(){
            alert("Welcome to this world");
        }
    });
    
    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
    
    var age = person.get("age"); // 67
    var name = person.get("name"); // "Thomas"
    var children = person.get("children"); // ['Ryan']

Manipulating model attributes

Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.

    Person = Backbone.Model.extend({
        defaults: {
            name: 'Fetus',
            age: 0,
            children: []
        },
        initialize: function(){
            alert("Welcome to this world");
        },
        adopt: function( newChildsName ){
            var children_array = this.get("children");
            children_array.push( newChildsName );
            this.set({ children: children_array });
        }
    });
    
    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
    person.adopt('John Resig');
    var children = person.get("children"); // ['Ryan', 'John Resig']

So we can implement methods to get/set and perform other calculations using attributes from our model at any time.

Listening for changes to the model

Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our “person” changes we will alert their new name.

    Person = Backbone.Model.extend({
        defaults: {
            name: 'Fetus',
            age: 0,
            children: []
        },
        initialize: function(){
            alert("Welcome to this world");
            this.bind("change:name", function(){
                var name = this.get("name"); // 'Stewie Griffin'
                alert("Changed my name to " + name );
            });
        },
        replaceNameAttr: function( name ){
            this.set({ name: name });
        }
    });
    
    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
    person.replaceNameAttr('Stewie Griffin'); // This triggers a change and will alert()

So we can bind the a change listener to individual attributes or if we like simply ‘this.bind(“change”, function(){});’ to listen for changes to all attributes of the model.

Fetching, Saving and Destroying

Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.

Tips and Tricks

Get all the current attributes

      
    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
    var attributes = person.toJSON(); // { name: "Thomas", age: 67, children: ['Ryan']}
    /* This simply returns a copy of the current attributes. */
    delete attributes;
    var attributes = person.attributes;
    /* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */

Validate data before you set or save it

    Person = Backbone.Model.extend({
        // If you return a string from the validate function,
        // Backbone will throw an error
        validate: function( attributes ){
            if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
                return "You can't be negative years old";
            }
        },
        initialize: function(){
            alert("Welcome to this world");
            this.bind("error", function(model, error){
                // We have received an error, log it, alert it or forget it :)
                alert( error );
            });
        }
    });
    
    var person = new Person;
    person.set({ name: "Mary Poppins", age: -1 }); 
    // Will trigger an alert outputting the error
    delete person;
    
    var person = new Person;
    person.set({ name: "Dr Manhatten", age: -1 });
    // God have mercy on our souls

What is a view?

2011-01-28T00:00:00+10:00

What is a view?

Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically Underscore.js’s _.template.

We will be using jQuery 1.5 as our DOM manipulator. It’s possible to use other libraries such as MooTools or Sizzle, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.

For the purposes of this demonstration, we will be implementing a search box. A live example can be found on jsFiddle.

    SearchView = Backbone.View.extend({
        initialize: function(){
            alert("Alerts suck.");
        }
    });

    // The initialize function is always called when instantiating a Backbone View.
    // Consider it the constructor of the class.
    var search_view = new SearchView;

The “el” property

The “el” property references the DOM object created in the browser. Every Backbone.js view has an “el” property, and if it not defined, Backbone.js will construct its own, which is an empty div element.

Let us set our view’s “el” property to div#search_container, effectively making Backbone.View the owner of the DOM element.

<div id="search_container"></div>

<script type="text/javascript">
	SearchView = Backbone.View.extend({
		initialize: function(){
			alert("Alerts suck.");
		}
	});
	
	var search_view = new SearchView({ el: $("#search_container") });
</script>

Note: Keep in mind that this binds the container element. Any events we trigger must be in this element.

Loading a template

Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to Underscore.js’s documentation for more information.

Let us implement a “render()” function and call it when the view is initialized. The “render()” function will load our template into the view’s “el” property using jQuery.

<div id="search_container"></div>

<script type="text/javascript">
	SearchView = Backbone.View.extend({
		initialize: function(){
			this.render();
		},
		render: function(){
			// Compile the template using underscore
			var template = _.template( $("#search_template").html(), {} );
			// Load the compiled HTML into the Backbone "el"
			this.el.html( template );
		}
	});
	
	var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
	<label>Search</label>
	<input type="text" id="search_input" />
	<input type="button" id="search_button" value="Search" />
</script>

Tip: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached.

Listening for events

To attach a listener to our view, we use the “events” attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the “el” property. Let us attach a “click” listener to our button.

<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            var template = _.template( $("#search_template").html(), {} );
            this.el.html( template );
        },
        events: {
            "click input[type=button]": "doSearch"
        },
        doSearch: function( event ){
            // Button clicked, you can access the element that was clicked with event.currentTarget
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
	<label>Search</label>
	<input type="text" id="search_input" />
	<input type="button" id="search_button" value="Search" />
</script>

Tips and Tricks

Using template variables

<div id="search_container"></div>

<script type="text/javascript">
	 SearchView = Backbone.View.extend({
		initialize: function(){
			this.render();
		},
		render: function(){
			//Pass variables in using Underscore.js Template
			var variables = { search_label: "My Search" };
			// Compile the template using underscore
			var template = _.template( $("#search_template").html(), variables );
			// Load the compiled HTML into the Backbone "el"
			this.el.html( template );
		},
		events: {
			"click input[type=button]": "doSearch"  
		},
		doSearch: function( event ){
			// Button clicked, you can access the element that was clicked with event.currentTarget
			alert( "Search for " + $("#search_input").val() );
		}
	});
		
	var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <!-- Access template variables with <%= %> -->
    <label><%= search_label %></label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

If you have any questions, leave a comment below.

Relevant Links

Author

Thomas Davis

Contributors

Michael Macias

What is a router?

2011-01-27T00:00:00+10:00

What is a router?

Backbone routers are used for routing your applications URL’s when using hash tags(#). In the traditional MVC sense they don’t neccesarily fit the semantics and if you have read “What is a view?” it will elaborate on this point. Though a Backbone “router” is still very useful for any application/feature that needs URL routing/history capabilities.

Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called.

Also note that routes intepret anything after “#” tag in the url. All links in your application should target “#/action” or “#action”. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "*actions": "defaultRoute" // matches http://example.com/#anything-here
        },
        defaultRoute: function( actions ){
            // The variable passed in matches the variable in the route definition "actions"
            alert( actions ); 
        }
    });
    // Initiate the router
    var app_router = new AppRouter;
    // Start Backbone history a neccesary step for bookmarkable URL's
    Backbone.history.start();

</script>

<a href="#action">Activate route</a>
<a href="#/route/action">Activate another route</a>
<!-- Notice the change in the url -->

Please note: * Prior to Backbone 0.5 (released 1. July 2011) a Router was called a Controller. To avoid confusion, the Backbone developers changed the name to Router. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ * });

Dynamic Routing

Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly URL string. Such that your URL would look like “http://example.com/#/posts/12”. Once this route was activated you would want to access the id given in the URL string. This example is implemented below.

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "/posts/:id": "getPost",
            "*actions": "defaultRoute" // Backbone will try match the route above first
        },
        getPost: function( id ) {
            // Note the variable in the route definition being passed in here
            alert( "Get post number " + id );   
        },
        defaultRoute: function( actions ){
            alert( actions ); 
        }
    });
    // Instantiate the router
    var app_router = new AppRouter;
    // Start Backbone history a neccesary step for bookmarkable URL's
    Backbone.history.start();

</script>

<a href="#/posts/120">Post 120</a>
<a href="#/posts/130">Post 130</a>
<!-- Notice the change in the url -->

Dynamic Routing Cont. “:params” and “*splats”

Backbone uses two styles of variables when implementing routes. First there are “:params” which match any URL components between slashes. Then there are “*splats” which match any number of URL components. Note that due to the nature of a “*splat” it will always be the last variable in your URL as it will match any and all components.

Any “*splats” or “:params” in route definitions are passed as arguments (in respective order) to the associated function. A route defined as “/:route/:action” will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)

Here are some examples of using “:params” and “*splats”

        routes: {
        
            "/posts/:id": "getPost",
            // <a href="http://example.com/#/posts/121">Example</a>
            
            "/download/*path": "downloadFile",
            // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
            
            "/:route/:action": "loadView",
            // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
            
        },
        
        getPost: function( id ){ 
            alert(id); // 121 
        },
        downloadFile: function( path ){ 
            alert(path); // user/images/hey.gif 
        },
        loadView: function( route, action ){ 
            alert(route + "_" + action); // dashboard_graph 
        }

Routes are quite powerful and in an ideal world your application should never contain too many. If you need to implement hash tags with SEO in mind, do a google search for “google seo hashbangs”.

Remember to do a pull request for any errors you come across.

Tips and Tricks

No Tips and Tricks

Relevant Links

Author

Thomas Davis

Contributors

Herman Schistad (Backbone 0.5 rename from Controller to Router)
Paul Irish

What is a collection?

2011-01-26T00:00:00+10:00

In progress

What is a collection?

Backbone collections are simply an ordered set of models. Such that it can be used in situations such as;

Model: Student, Collection: ClassStudents
Model: Todo Item, Collection: Todo List
Model: Animals, Collection: Zoo

Typically your collection will only use one type of model but models themselves are not limited to a type of collection;

Model: Student, Collection: Gym Class
Model: Student, Collection: Art Class
Model: Student, Collection: English Class

Here is a generic Model/Collection example.

    var Song = Backbone.Model.extend({
        initialize: function(){
            console.log("Music is the answer");
        }
    });
    
    var Album = Backbone.Collection.extend({
		model: Song
	});

Building a collection

Now we are going to populate a creation with some useful data.

    var Song = Backbone.Model.extend({
		defaults: {
			name: "Not specified",
			artist: "Not specified"
		},
        initialize: function(){
            console.log("Music is the answer");
        }
    });
    
    var Album = Backbone.Collection.extend({
		model: Song
	});
	
	var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
	var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
	var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });
	
	var myAlbum = new Album([ song1, song2, song3]);
	console.log( myAlbum.models ); // [song1, song2, song3]

Relevant Links

Backbone.js official website

Author

Thomas Davis

Contributors

None