まず、Backbone.jsとは？
軽量のjavascript MVCフレームワークです。
Backbone.jsにいつく重要な要素を説明します。
- Modelモデル：検索処理等の業務ロジック処理を行い、処理結果データを保持する役割と果たす。例：人間People
- Collection Modelの集合
- View:ユーザーインタフェースとしてユーザーとのやり取りを行う役割を果たす
- Router:クライアント側でのページ遷移のイベントとその後の処理をマッッピングをマッピングするルーティング機能を提供する
とりあいず、いつもの「Hello World」をBackbone.jsで書いてみましょう。
以下のソースコードを「test.html」ファイルで保存します。
<!DOCTYPE html>
<html>
<head>
<title>kaoru2012-backbone.js-Hello World</title></head>
<body>
<button id="check">→クリックMe</button>
<ul id="world-list">
</ul>
<a href="http://kaoru2012.blogspot.jp/">もっとみる</a>
<script src="http://chay.chagasi.com/jquery-1.10.2.js"></script>
<script src="http://chay.chagasi.com/underscore.js"></script>
<script src="http://chay.chagasi.com/backbone.js"></script>
<script>
(function ($) {
World = Backbone.Model.extend({
// name属性を持つWoldモデルを作成します。
name: null
});
Worlds = Backbone.Collection.extend({ // Worldの集合オブジェクトWorldsを定義
initialize: function (models, options) {
this.bind("add", options.view.addOneWorld);
}
});
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
// コンストラクター関数
this.worlds = new Worlds(null, { view : this })
},
events: {
"click #check":"checkIn", // イベントをバインドする
},
checkIn: function(){
var world_name = prompt("すみません、どこからきましたか。");
if(world_name == "") world_name = '未知の星';
var world = new World({ name: world_name });
this.worlds.add(world);
},
addOneWorld: function(model){
$("#world-list").append("<li>ここは<b>" + model.get('name') + "</b> からの挨拶:hello world!</li>");
}
});
// AppViewオブジェクトを作る
var appview = new AppView;
})(jQuery);
</script>
</body>
</html>
