【JavaScript】BackboneJsの導入と簡単な使い方(Viewの使い方)

backbone2

こんにちわ。@giant_morinkeyです。
JavaScriptのMVCライブラリのBackbone.jsのダウンロード方法と基本的な使い方を紹介します。

JavaScriptのMVCライブラリは、AngularJSが人気急上昇らしいですが、わたし自身仕事でBackbone.jsを使っていたので、備忘録の意味も込めて、当ブログでは何回かに分けてBackbone.jsを紹介していきます。

[スポンサーリンク]

このページでやること

Backbone.jsの導入方法を紹介します。
Backbone.jsのBackbone.View.extendのみを使った、簡単な使い方を紹介します。

Backbone.jsのダウンロード

こちらのページからライブラリをダウンロードしてください。
2つのライブラリを導入する必要があります。

Backbone.View.extendを使ったサンプルソース

とりあえず簡単なプログラムを作っていきましょう。
MVCの"V"のView部分のみを使用したシンプルなプログラムです。
(MC部分は次回以降で紹介します。)

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>exflexfixedのサンプル</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 Sample1();
    return;
});

var Sample1 = Backbone.View.extend({

	// 制御対象のセレクタ(CSSのクラス)を指定します。
	el: '.sample1',

	// イベント(クリック、マウスオーバ)はここに集約します。
	events: {
		'click h1': 'onClick',
		'mouseover h2': 'onMouseover'
	},

	//初期化
	initialize: function(){
		return;
	},
 
	// イベント(マウスクリック)のロジックです。
	onClick: function(){
		alert('Hello! マウスクリックしましたね!');
		return;
    },
	// イベント(マウスクオーバー)のロジックです。
	onMouseover: function(){
		alert('Hello! マウスオーバーしましたね!!!!!!!!!!!!!!!!!!');
		return;
    } 
});
// -->
</script>
 
 
</head>
 
<body bgcolor="#e2e2e2">
 
<div class="sample1">
    <h1>マウスクリックして下さい。イベントが発生します。</h1>
    <br/>
    <h2>マウスオーバーして下さい。イベントが発生します。</h2>
    <br/>
</div>
<hr/>

 
</body>
</html>

デモ

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

解説

Backbone.jsのViewを使うことで、下記のような各イベント毎の処理を一括管理することが出来ます。
eventsにマウスクリックやマウスオーバーなどのイベントを集約して管理します。

$("p").click(function () {
  .......
  .......
});

各イベントの適応範囲ですが、イベントの単位は、セレクタ(id名)で管理するような感じになります。
el部分へセレクタ(id名)を記述します。

おまけ

Backbone.js(JavaScriptMVCフレームワーク)を使うことのメリットが分かりやすく解説されています。
わたしもBackbone.jsを導入するにあたって、こちらのスライドを一読しましたが、非常に役に立つ内容でした。
特に、なぜJavaScriptにMVCフレームワークが必要なのか?という疑問は、こちらのスライドを読めば解決すると思います。

さいごに

Backbone.jsを使うと、一つの画面内でも分担して作業ができてとても便利になります。

今回は紹介していませんが、コントローラとモデルの部分を使って、外部APIと通信して初めて、Backbone.jsの力が発揮されます。
次回以降、当ブログでもBackbone.jsのコントローラとモデルの部分の使い方を紹介していきたいと思います。
それでは!