ダウンロード

Backbone.js を下記URLからダウンロードします。
また Backbone.js は Underscore.js, jQuery に依存しますので合わせてダウンロードしましょう。

Backbone.js
Underscore.js

Backbone.js 1.0.0
Underscore.js 1.5.1
jQuery 1.8.2
を使用します。

ダウンロードしたら読み込みます。

html

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="js/lib/underscore-min.js"></script>
	<script src="js/lib/backbone-min.js"></script>
	<script src="js/app.js"></script>
	

app.js はこれから作るアプリケーションのファイルなので新たに作成します。
下記のようにして jQuery を使用できるようにします。

app.js

	(function($){
    //ここにコードを書く
	})(jQuery);
	

やること

準備ができたので早速使ってみましょう。
今回はjsonで取得したデータを、単純にリストで表示するということをやってみます。

Backbone.js は大きく別けると Model、Collection, View, Router の要素で構成されています。
Model はデータの取得や保存などを行います。Collection は Model の集合で、View ではDOMの操作やイベントの設定など行います。
今回は Router は使用しません。

Model

最初に Model を作成します。
app.js に下記を記述します。

app.js

    var User = Backbone.Model.extend({
        defaults: {
            'name': '',
            'age': 0
        }
    });
	

defaults に name, age を設定します。これは値がない時に設定される値です。
あと入力するアプリケーションでしたら validate を設定しますが、今回は表示するだけなので省略します。

Collection

続いて Collection です。

app.js

	var Users = Backbone.Collection.extend({
        model: User,
        url: 'data.json'
    });
	

model プロパティで User モデルに関連付けします。
今回はjsonデータを読み込みますので、urlに指定します。
data.json は下記の構造にします。

data.json

	[
		{
			"name": "田中", "age": "10"
		},
		{
			"name": "山田", "age": "16"
		},
		{
			"name": "内田", "age": "32"
		}
	]
	

View

最後に View です。

app.js

	var UserView = Backbone.View.extend({
		el: $('#view'),
		initialize: function(){
			this.collection = new Users();
			this.collection.fetch({
				error:  $.proxy(this.error, this),
				success: $.proxy(this.render, this)
			});
		},
		render: function(){
			_(this.collection.models).each(function(item){
				this.appendItem(item);
			}, this);
		},
		appendItem: function(item){
			var user = {
				name: item.get('name'),
				age: item.get('age')
			};
			$(this.el).append(this.template(user));
		},
		error: function() {
			$(this.el).append(this.template({name: '取得できませんでした。'}));
		},
		template: _.template("<li><%= name %> <% if(typeof(age) != 'undefined'){ %>(<%= age %>)<% } %></li>")
	});
    var staffView = new UserView();
	

initialize はインスタンス作成時に実行される関数です。
collection.fetch で json を読み込み成功したら render を実行し append で要素を追加しています。
html に el で指定した要素を作成します。

html

	<ul id="view"></ul>
	

とまあ、これくらいの規模だとただ冗長なだけな気がしますが、入力欄を作ってサーバーとやりとりがでてくるアプリケーションならメリットがあるのかなとか。