Backbone.js事始め その4 イベント処理


`Backbone.js`のイベント処理。わかったようで、わかっていないので覚え書き。

イベントの定義には、主として下記の2種類の記述方法があるらしい。
但し、厳密に動作が全く同じかどうかは定かではない。

どちらも、コンストラクタ`initialize:`内でイベント定義する。

##方法1 on('change', function({}));

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Backbone.js イベント処理</title>

	<!-- テンプレート作成 -->
	<script type="text/template" id="animal-template"></script>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
	<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
</head>
<body>
	<h3>イベント処理サンプル</h3>

	<script type="text/javascript">
	(function() {
		//----------
		// Model作成
		//----------
		var Person = Backbone.Model.extend({
			//Attribute(属性)
			defaults: {
				name: "None",
				age: 0
			},
			//コンストラクタ
			initialize: function(){
				console.log("初期化処理 : " + this.get("name"));
				//イベント定義
				this.on("change", function(){
					if(this.hasChanged('name')){
						console.log("名前が変わりました。");
					}else if(this.hasChanged('age')){
						console.log("年齢が変わりました。");
					}
				});
			}
		});
		//モデルのインスタンス化	
		var none = new Person();
		none.set('name','ほげほげ');
		//表示
		console.log("私は、" + none.get('name') + " " + none.get('age') + "歳です。");
		none.set('age',26);
		//表示
		console.log("私は、" + none.get('name') + " " + none.get('age') + "歳です。");

	})();
	</script>
</body>
</html>

```

結果は下記。

![スクリーンショット 2014-09-27 19.21.39.png](https://qiita-image-store.s3.amazonaws.com/0/3184/775b4d06-e243-9e7e-403a-acf465660634.png "スクリーンショット 2014-09-27 19.21.39.png")

##方法2 on('change:attribute-name', function(){});

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Backbone.js イベント処理</title>

	<!-- テンプレート作成 -->
	<script type="text/template" id="animal-template"></script>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
	<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
</head>
<body>
	<h3>イベント処理サンプル</h3>

	<script type="text/javascript">
	(function() {
		//----------
		// Model作成
		//----------
		var Person = Backbone.Model.extend({
			//Attribute(属性)
			defaults: {
				name: "None",
				age: 0
			},
			//コンストラクタ
			initialize: function(){
				console.log("初期化処理 : " + this.get("name"));
				//イベント定義
				this.on('change:name', function(){
			 		console.log("名前が変わりました。");
				}),
				this.on('change:age', function(){
			 		console.log("年齢が変わりました。");
				})
			}
		});
		//モデルのインスタンス化	
		var none = new Person();
		none.set('name','ほげほげ');
		//表示
		console.log("私は、" + none.get('name') + " " + none.get('age') + "歳です。");
		none.set('age',26);
		//表示
		console.log("私は、" + none.get('name') + " " + none.get('age') + "歳です。");

	})();
	</script>
</body>
</html>
```

結果は同様。

![スクリーンショット 2014-09-27 20.11.25.png](https://qiita-image-store.s3.amazonaws.com/0/3184/aee5fe3d-a9f9-c5d3-c636-16f00378198a.png "スクリーンショット 2014-09-27 20.11.25.png")


但し、ちょっと気になる事象を見つけてしまったので、続きは[次章](http://qiita.com/tajihiro/items/e07afd3ca42b42f0987c)にて。