Backbone.js tutorial

+ jQuery + undescore + backbone

by Rakesh Shetty

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<h2 id="game-of-the-day">Game of the day is <span>...</span></h2>
Our games:
<ul id="handler"></ul>

CSS

#game-of-the-day {
    margin-bottom: 10px;
    font-size: 20px;
}

#handler {
    border: 1px solid #777;
    border-radius: 4px;
    padding: 4px 0 4px 8px;
    background: #000;
    color: lime;
}

JavaScript

// Create Game model
var Game = Backbone.Model.extend({
    initialize: function() {
        // alert("Oh hey! ");
    },
    defaults: {
        name: 'no-title',
        releaseDate: 2011
    }
});

// Create a new game from Game model
var portal = new Game({
    name: "Portal 2",
    releaseDate: 2011
});

// Changes the name attribute
portal.set({
    name: "Portal 2 by Valve"
});

// Create second game from Game model
var diablo = new Game({
    name: "Diablo",
    releaseDate: 1999
});

// Create third game from Game model
var starcraft = new Game({
    name: "Starcraft"
});

// Creates GamesCollection Collection 'class' of Game models
var GamesCollection = Backbone.Collection.extend({
    model: Game
});

// Crate instance of collection added two games
var games = new GamesCollection([portal, diablo]);

// Add third game
games.add(starcraft);

// Iterate over game collection using Undescore.js' each method
_.each(games.models, function(value, key) {

    $('#handler').append('<li>' + value.get('name') + '</li>');
});

// Access collection model by index
var game = games.at(1);
$('#game-of-the-day span').html(game.get('name') + ' (' + game.get('releaseDate') + ')');