Kendo UI开发课程(16): Kendo MVVM 数据绑定(五) Events
Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似，为事件绑定的一般形式。
Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理（如鼠标事件）。
例如：
1 |
<div id="view">
|
2 |
<span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
|
3 |
<span data-bind="visible: isDescriptionShown, text: description"></span>
|
4 |
</div>
|
5 |
<script>
|
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);
|
12 |
},
|
13 |
hideDescription: function (e) {
|
14 |
// hide the span by setting isDescriptionShown to false
|
15 |
this.set("isDescriptionShown", false);
|
16 |
}
|
17 |
});
|
18 |
19 |
kendo.bind($("#view"), viewModel);
|
20 |
</script>
|
实际上，click绑定是events绑定的一个特例，下面的两种实现是等效的：
1 |
<span data-bind="click: clickHandler"></span>
|
2 |
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>
|
2 |
<script>
|
3 |
var viewModel = kendo.observable({ |
4 |
click: function(e) {
|
5 |
e.stopPropagation();
|
6 |
}
|
7 |
}); |
8 |
9 |
kendo.bind($("span"), viewModel); |
10 |
</script>
|
停止事件缺省处理
如果要取消某些DOM元素单击后的缺省处理函数，比如转到其它页面或是提交表单，为了取消这些缺省实际处理，可以调用preventDefault()方法。例如：
1 |
<a href="http://example.com" data-bind="click: click">Click</span>
|
2 |
<script>
|
3 |
var viewModel = kendo.observable({ |
4 |
click: function(e) {
|
5 |
// stop the browser from navigating to http://example.com
|
6 |
e.preventDefault();
|
7 |
}
|
8 |
}); |
9 |
10 |
kendo.bind($("a"), viewModel); |
11 |
</script>
|