【JavaScript】BackboneJsのMVCの基本的な使い方

backbone2

こんにちわ。@giant_morinkeyです。
JavaScriptのMVCライブラリのBackbone.jsのMVCを使った基本的な使い方を紹介します。

外部APIへアクセスすることを想定としたより実践に近い形のMVCの使い方を紹介していきます。
Backbone.jsの導入方法については、過去記事のBackboneJsの導入と簡単な使い方(Viewの使い方)を参照して下さい。

[スポンサーリンク]

このページでやること

Backbone.jsのMVCを使った、実践な使い方を紹介します。

MVCを使ったサンプルソース

さっそくプログラムを作っていきましょう。
今回紹介するプログラムは、外部のAPIへ通信することを想定とした実践的なプログラムです。
サンプルプログラムでは、外部APIの変わりにローカルファイルを読みむような処理に変えてあります。

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>Backbone.jsのサンプル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript" ></script>
<script src="./js/underscore.js"></script>
<script src="./js/backbone.js"></script>
 
<!-- スクリプト部分 -->
<script type="text/javascript">
<!--
$(document).ready(function(){
	new View();
	return;
});

// Model部分
var Model = Backbone.Model.extend({
	defaults: {
		'firstname': '',
		'lastname': ''
	}
});

// Collection部分
var Collection = Backbone.Collection.extend({
	model: Model,
	url: 'data.json'
});


// View部分
var View = Backbone.View.extend({
	el: $('#list'),
	initialize: function(){
		this.col = new Collection();
		this.col.fetch({
			error:  $.proxy(this.error, this),
			success: $.proxy(this.render, this)
		});
	},
	// 描画処理
	render: function(){
		_(this.col.models).each(function(model){
		this.success(model);
		}, this);
	},
	// テンプレート生成
	success: function(model){
		var localmodel = {
			firstname: model.get('firstname'),
			lastname: model.get('lastname')
		};
		$('#list').append(this.templ(localmodel));
	},
	// API成功時のテンプレート
	templ: _.template( "<li><%= lastname %> <%= firstname %></li>"),
	// APIエラー時テンプレート
	error: function() {
		$('#list').append("エラー!! data.json が取得できません。");
	}
	});

// -->
</script>
 
 
</head>
 
<body bgcolor="#e2e2e2">



<ul id="list"></ul>

<br/>
<hr/>
<p>注意</p>
<p>このソースをコピーしてローカル環境で使う場合は、FireFoxかIEを使って下さい。chromeでは動きません。</p>

 
</body>
</html>

data.json

[
    {
        "firstname": "鉄也", "lastname": "武田"
    },
    {
        "firstname": "一義", "lastname": "森田"
    },
    {
        "firstname": "たけし", "lastname": "北野"
    }
]

デモ

実際に動かすことが出来ます

解説

今回のサンプルプログラムは、ローカルファイルを読込んで処理する作りとなっています。
ローカルファイルではなく、外部APIを指定したい場合は、29行目の「url: 'data.json'」を外部APIのURLへ変更して下さい。

さいごに

一目サンプルプログラムを見ると、View部分が難しそうに見えますが、さわりはじめると早い段階で慣れてくると思います。
CollectionとModelは直感でイケそうな感じですね。

1つの画面で複数の外部APIへのアクセスが発生すればするほどBackbone.jsの強みはいかされるように感じました。
今後も色々なプロジェクトで使っていきたいものです。
それでは!