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>
結果は下記。
方法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>
結果は同様。
但し、ちょっと気になる事象を見つけてしまったので、続きは次章にて。