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

前回の記事で発見した記述ミスによる挙動の違いに気づいたので覚え書き。
モデルの初期化時にイベントを定義してみた。基本的には簡単な記述ミスであるのだが、全く違う挙動を見せるので下記にパターンを記す。

on('change:name',function(){})
on('change :name',function(){})
on('change: name',function(){})
on('change : name',function(){})

属性のchangeイベントをハンドラの定義する時に、on('change:name',function(){})と記述するわけであるが、思わずスペースを入れてしまうと挙動が異なる。一番の問題はエラーにならないので、非常に気付きにくい。

ソースコード

	<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("年齢が変わりました。");
				})
				console.log("初期化処理修了 : " + this.get("name"));
			}
		});
		//モデルのインスタンス化	
		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>

スペース無しの場合 ※正しい記述

//コンストラクタ
initialize: function(){
	console.log("初期化処理開始 : " + this.get("name"));
	//イベント定義
	this.on('change:name', function(){
 		console.log("名前が変わりました。");
	}),
	this.on('change:age', function(){
 		console.log("年齢が変わりました。");
	})
	console.log("初期化処理修了 : " + this.get("name"));
}
});

スペース有り(前)の場合 ※記述ミス1

//コンストラクタ
initialize: function(){
	console.log("初期化処理開始 : " + this.get("name"));
	//イベント定義
	this.on('change :name', function(){
 		console.log("名前が変わりました。");
	}),
	this.on('change :age', function(){
 		console.log("年齢が変わりました。");
	})
	console.log("初期化処理修了 : " + this.get("name"));
}
});

スペース有り(後)の場合 ※記述ミス2

//コンストラクタ
initialize: function(){
	console.log("初期化処理開始 : " + this.get("name"));
	//イベント定義
	this.on('change: name', function(){
 		console.log("名前が変わりました。");
	}),
	this.on('change: age', function(){
 		console.log("年齢が変わりました。");
	})
	console.log("初期化処理修了 : " + this.get("name"));
}
});

スペース有り(両側)の場合 ※記述ミス3

//コンストラクタ
initialize: function(){
	console.log("初期化処理開始 : " + this.get("name"));
	//イベント定義
	this.on('change : name', function(){
 		console.log("名前が変わりました。");
	}),
	this.on('change : age', function(){
 		console.log("年齢が変わりました。");
	})
	console.log("初期化処理修了 : " + this.get("name"));
}
});

結論

まずは、記述ミス2の スペース有り(後)は、changeチェンジハンドラに対して、スペース + 属性: nameという属性を待ち受けていることになる。当然、そのような属性は存在しないために、そもそもイベントハンドラは呼ばれない。

次に、記述ミス1のスペース有り(前)と、記述ミス3のスペース有り(両方)の挙動は、チェンジ + スペース change :というハンドラを定義していることとなる。しかし、イベントハンドラが全て呼ばれてしまっている。これに関しては、どのような原理でそうなるのか正直わからない。

その挙動の仕組みをアドバイスを頂けたらと思うが、とりあえず記述ミスをしないようにすることを心に留める。