backbone(5) view事件机制

来源：互联网发布：matter.js 编辑：程序博客网时间：2024/06/16 16:08

View 事件

1.继承backbone 的事件机制 -- on / off / trigger / once /

2. view 展示界面负责用户对 dom 事件的响应

=====

view 监听model 事件

toDoItemView.listenTo( toDoItem ,'change' , function(){
console.log('toDoItemView listenTo toDoItem change-event');
});

</script>
</body>
</html>

=======

3.model 和 view 的事件关联

----Model 和 View 事件关联

······

//在构造的时候就直接写好了方法每到实例化直接存在实例化的里面

<html>
<head>
<script src= 'underscore.js' ></script>
<script src= 'jquery.js' ></script>
<script src= 'backbone.js' ></script>
</head>
<body>
<script>
var ToDoItem = Backbone.Model.extend({
});
var toDoItem = new ToDoItem({
'title':'task123' ,
'discription':'discription1'
});
var toDoItem2 = new ToDoItem( {xix:"123"});
var ToDoItemView = Backbone.View.extend({
//构造里面会在构造的时候自动调用
initialize: function(){
// this.model
// 是实例化出来的
this.listenTo(this.model , 'change' , function(){
console.log( this.model.get('title') );
})
}
});
var toDoItemView = new ToDoItemView({
model : toDoItem
});
//这里在view 里监听
// toDoItemView.listenTo( toDoItem ,'change' , function(){
// console.log('toDoItemView listenTo toDoItem change-event');
// });
</script>
</body>
</html>

······

------------

每次触发时候会回调render 方法来重绘

定义model 类 view 继承backbone

实例化 model 和 view

在 view 的实例化里指定其 model

在 view 的类中写默认方法 initialize 来监听（默认监听的好处是自动去绑定自动识别）实例化的对对象自己的事件触发写的 render 方法的回调

（由手动调用监听变为自动去监听）实例化之后自带方法

---·····监听·····---

<html>
<head>
<script src= 'underscore.js' ></script>
<script src= 'jquery.js' ></script>
<script src= 'backbone.js' ></script>
</head>
<body>
<script>
var ToDoItem = Backbone.Model.extend({
});

var toDoItem = new ToDoItem({
'title':'task123' ,
'discription':'discription1'
});

var toDoItem2 = new ToDoItem( {xix:"123"});

var ToDoItemView = Backbone.View.extend({
initialize: function(){
// this.model 是实例化出来的
this.listenTo(this.model , 'change' , this.render );
} ,

render: function(){
console.log('render method');
}
});

//构造里面会在构造的时候自动调用

var toDoItemView = new ToDoItemView({
model : toDoItem
});
// view 直接监听model 的能力不用再绑定
var toDoItemView2 = new ToDoItemView({
model : toDoItem
});

//这里在view 里监听
// toDoItemView.listenTo( toDoItem ,'change' , function(){
// console.log('toDoItemView listenTo toDoItem change-event');
// });

</script>
</body>
</html>

---- view 响应用户事件

·······················

//事件 - 点击事件 - 触发回调函数这一点上说： view 作用是响应用户事件
events:{
'click':'handleELCLICK'
} ,

// initialize 构造方法在这个方法里 view 监听他所知道的构造方法
// 于是当对所监听的model 进行事件触发时候 model 通过调用trigger方法触发事件
// 反过来通知view , view 通过设置回掉函数来调用自己的render 方法改变自己的外观
// view
initialize: function(){
// this.model 是实例化出来的
this.listenTo(this.model , 'change' , this.render );
} ,

render: function(){
console.log('render method');
},
handleELCLICK : function(){
console.log('handle EL click el ');
}

});

//构造里面会在构造的时候自动调用
var toDoItemView = new ToDoItemView({
model : toDoItem ,
el:'#p1'
});

// view 直接监听model 的能力不用再绑定
var toDoItemView2 = new ToDoItemView({
model : toDoItem ,
el : '#p2'
});

//这里在view 里监听

// toDoItemView.listenTo( toDoItem ,'change' , function(){

// console.log('toDoItemView listenTo toDoItem change-event');

// });

</script>
</body>

</html>

················································

双击点击事件

<html>

<head>
<script src= 'underscore.js' ></script>
<script src= 'jquery.js' ></script>
<script src= 'backbone.js' ></script>

</head>
<body>

<p id ='p1'> p1</p>
<p id = 'p2'>p2</p>

<script>
var ToDoItem = Backbone.Model.extend({

});

var toDoItem = new ToDoItem({
'title':'task123' ,
'discription':'discription1'
});

var toDoItem2 = new ToDoItem( {xix:"123"});
var ToDoItemView = Backbone.View.extend({

//事件 - 点击事件 - 触发回调函数这一点上说： view 作用是响应用户事件
// dblclick 事件双击点击事件
events:{
// 'click':'handleELCLICK' ,
'dblclick':'handleELDbCLICK'
} ,

// initialize 构造方法在这个方法里 view 监听他所知道的构造方法
// 于是当对所监听的model 进行事件触发时候 model 通过调用trigger方法触发事件
// 反过来通知view , view 通过设置回掉函数来调用自己的render 方法改变自己的外观
// view


initialize: function(){
// this.model 是实例化出来的
this.listenTo(this.model , 'change' , this.render );
} ,

render: function(){
console.log('render method');
},

handleELCLICK : function(){
console.log('handle EL click el ');
},

handleELDbCLICK : function(){
console.log('handle EL ddclick el ');
}
});

//构造里面会在构造的时候自动调用

var toDoItemView = new ToDoItemView({
model : toDoItem ,
el:'#p1'
});

// view 直接监听model 的能力不用再绑定
var toDoItemView2 = new ToDoItemView({
model : toDoItem ,
el : '#p2'
});

//这里在view 里监听

// toDoItemView.listenTo( toDoItem ,'change' , function(){

// console.log('toDoItemView listenTo toDoItem change-event');

// });

</script>
</body>

</html>

----------------------------------------------------------------````````````````````````````````````````````````````````````````````````....................................................

====****=====+++++=====

通过选择器来精准定位事件触发

var json = this.model.toJSON() ;
this.$el.html('<h2>'+ json.title +'</h2>' + '<P>'+ json.discription +'</P>');
return this

},

handleELCLICK : function(){
console.log('handle EL click el ');
},

handleELDbCLICK : function(){
console.log('handle EL ddclick el ');
}
});

//构造里面会在构造的时候自动调用

var toDoItemView = new ToDoItemView({

model : toDoItem ,

});

// view 直接监听model 的能力不用再绑定
var toDoItemView2 = new ToDoItemView({

model : toDoItem2 ,


});

//这里在view 里监听

// toDoItemView.listenTo( toDoItem ,'change' , function(){

// console.log('toDoItemView listenTo toDoItem change-event');

// });
//

toDoItemView.render().$el.appendTo($('body'));
toDoItemView2.render().$el.appendTo($('body'));

</script>
</body>
</html>

==================================

<html>

<head>
<script src= 'underscore.js' ></script>
<script src= 'jquery.js' ></script>
<script src= 'backbone.js' ></script>

</head>
<body>

<p id ='p1'> <span>p12345 <a href="#">p222</a></span> <a href="#">111111111</a></p>
<p id = 'p2'>p2</p>

<script>

var ToDoItem = Backbone.Model.extend({

});

var toDoItem = new ToDoItem({
'title':'task1 ' ,
'discription':'discription1'
});

var toDoItem2 = new ToDoItem({
'title':'task2' ,
'discription':'discription2'
});

var ToDoItemView = Backbone.View.extend({

//事件 - 点击事件 - 触发回调函数这一点上说： view 作用是响应用户事件
// dblclick 事件双击点击事件
// 在所指定的el 标签里选择，支持标签选择器 click span 只有点击span下的标签才能触发
// span 是jquery 的选择器可以是id 选择器 / 类选择器 / .span #span
events:{
'click button':'handleRmELCLICK' ,
// 'dblclick':'handleELDbCLICK'

} ,

// initialize 构造方法在这个方法里 view 监听他所知道的构造方法
// 于是当对所监听的model 进行事件触发时候 model 通过调用trigger方法触发事件
// 反过来通知view , view 通过设置回掉函数来调用自己的render 方法改变自己的外观
// view


initialize: function(){
// this.model 是实例化出来的
this.listenTo(this.model , 'change' , this.render );
this.listenTo(this.model , 'destroy' , this.remove );
} ,

render: function(){

var json = this.model.toJSON() ;

this.$el.html('<h2>'+ json.title +'</h2>' + '<P>'+ json.discription +'</P><button>delete</button>');

return this

},

handleRmELCLICK : function(){

// this.remove();
//
this.model.destroy();

},

handleELDbCLICK : function(){
console.log('handle EL ddclick el ');
}

});

//构造里面会在构造的时候自动调用

var toDoItemView = new ToDoItemView({

model : toDoItem ,

});

// view 直接监听model 的能力不用再绑定
var toDoItemView2 = new ToDoItemView({

model : toDoItem2 ,

});

//这里在view 里监听

// toDoItemView.listenTo( toDoItem ,'change' , function(){

// console.log('toDoItemView listenTo toDoItem change-event');

// });
//

toDoItemView.render().$el.appendTo($('body'));
toDoItemView2.render().$el.appendTo($('body'));


</script>
</body>

</html>

== 通过监听事件 destroy() 来删除元素；

点击之后不直接移除dom

先删除model 删除的同时触发destroy事件 view 监听destroy 事件移除 dom 元素

当事件被监听到的时候再次把界面元素 remove 掉

逻辑更加完整

不直接destory 通过监听model 的destroy的事件来监听删掉界面元素

//===//

view 事件机制内置的

构造函数里和model关联

view 通过events 声明接受用户事件做出响应

//===//

0 0