Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
转载
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式。
Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事件)。
例如:
2 |
< span data-bind = "events: { mouseover: showDescription, mouseout: hideDescription }" >Show description</ span >
|
3 |
< span data-bind = "visible: isDescriptionShown, text: description" ></ span >
|
6 |
var viewModel = kendo.observable({
|
7 |
description: "Description",
|
8 |
isDescriptionShown: false,
|
9 |
showDescription: function (e) {
|
10 |
// show the span by setting isDescriptionShown to true
|
11 |
this.set("isDescriptionShown", true);
|
13 |
hideDescription: function (e) {
|
14 |
// hide the span by setting isDescriptionShown to false
|
15 |
this.set("isDescriptionShown", false);
|
19 |
kendo.bind($("#view"), viewModel);
|
实际上,click绑定是events绑定的一个特例,下面的两种实现是等效的:
1 |
< span data-bind = "click: clickHandler" ></ span >
|
3 |
< span data-bind = "events: { click: clickHandler }" ></ span >
|
注: Kendo MVVM的 DOM 事件参数 e封装在jQuery 的Event对象中。
中止事件向上传递
如果需要终止事件向上传递(event bubbling),可以调用stopPropagation方法。
1 |
< span data-bind = "click: click" >Click</ span >
|
3 |
var viewModel = kendo.observable({ |
9 |
kendo.bind($("span"), viewModel); |
停止事件缺省处理
如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用preventDefault()方法。例如:
1 |
< a href = "http://example.com" data-bind = "click: click" >Click</ span >
|
3 |
var viewModel = kendo.observable({ |
5 |
// stop the browser from navigating to http://example.com
|
10 |
kendo.bind($("a"), viewModel); |
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。