Backbone.js 일 시작 그 4 사건 처리
16747 단어 jQueryJavaScriptBackbone.js
Backbone.js의 사건 처리.알 것 같아, 몰라서 적어놨어.활동의 정의는 주로 다음과 같은 두 가지 기술 방법이 있다.
그러나 엄밀히 말하면 동작이 완전히 같은지는 확실하지 않다.
둘 다 구조 함수
initialize: 내에서 이벤트를 정의합니다.방법 1on('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>
방법 2on('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>
하지만 다소 신경 쓰이는 현상이 발견돼 다음다음 장이 뒤를 이었다.
Reference
이 문제에 관하여(Backbone.js 일 시작 그 4 사건 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tajihiro/items/c68d1579bf9e95d84116텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
