Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
2014-01-21 09:11
507 查看
Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件。当点击目标DOM元素时触发ViewModel的对应方法。
例如:
实际上,click绑定是events绑定的一个特例,下面的两种实现是等效的:
注: Kendo MVVM的 DOM 事件参数 e封装在jQuery 的Event对象中。
如果需要终止事件向上传递(event bubbling),可以调用stopPropagation方法。
如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用preventDefault()方法。例如:
Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件。当点击目标DOM元素时触发ViewModel的对应方法。
例如:
使用Click绑定
1 | < div id = "view" > |
2 | < span data-bind = "click: showDescription" >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 | }); |
14 |
15 | kendo.bind($("#view"), viewModel); |
16 | </ script > |
实际上,click绑定是events绑定的一个特例,下面的两种实现是等效的:
1 | < span data-bind = "click: clickHandler" ></ span > |
2 |
3 | < span data-bind = "events: { click: clickHandler }" ></ span > |
中止事件向上传递
如果需要终止事件向上传递(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[/code] |
6 | e.preventDefault(); |
7 | } |
8 | }); |
9 |
10 | kendo.bind($("a"), viewModel); |
11 | </ script > |
相关文章推荐
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
- Kendo UI开发教程(15): Kendo MVVM 数据绑定(四) Disabled/Enabled
- Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
- Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
- Kendo UI开发教程(17): Kendo MVVM 数据绑定(六) Html
- Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text
- Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
- Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source
- Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style
- Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text
- Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source
- Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked
- Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked
- Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value
- Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style
- Kendo UI开发教程(18): Kendo MVVM 数据绑定(七) Invisible/Visible