Backbone.jsのModelクラス①

Backbone.jsの学習を始めてみました。
Backbone.jsって何？
っていう人のために。

自分もよくわかっていませんが、何かと乱雑になってしまうJavaScriptのコードにMVCの考え方を持ち込んで
ソースコードをスッキリと機能的に記述できるようにしたフレームワークだそうです。

フレームワークと言っても特に大きな制約があるわけでもなく、
jQuery、underscore.jsに依存するため、これらを事前にインポートしておく必要がある程度です。

今日は最初の記事ということで、Modelクラスについて書いていきたいと思います。
Modelはデータの定義やロジック部分となる手続きをまとめたクラスになります。

<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="../js/underscore.js"></script>
<script type="text/javascript" src="../js/backbone.js"></script>
<script type="text/javascript">
var Player = Backbone.Model.extend({ // -①
});

$(document).ready(function() {
	player = new Player({ // -②
		name : "田中一郎"
	});
	
	$("#contents").text(player.get("name")); // -③
});
</script>
</head>
<body>
<div id="contents">
</div>
</body>
</html>

順番に説明していきます。

①Modelクラスの定義

Playerというクラスを作ってみました。
「Backbone.Model.extend」の部分は固定です。

②Playerクラスの生成

生成には通常のJavaScriptと同じようにnewを用います。
コンストラクタとして、メンバ変数nameに「田中一郎」を設定しています。

③Playerクラスの内容の取得

②で生成したPlayerクラスの変数に対して、getメソッドを用い、メンバ変数の照会をしています。
get("メンバ")とすることでModelクラスのメンバを取得することができます。
逆にset("メンバ", "設定値")とすることで、Modelクラスのメンバに値を設定することができます。

上記のコードの結果は、画面ロード後に「田中一郎」と表示されます。