Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件。当点击目标DOM元素时触发ViewModel的对应方法。
例如:
使用Click绑定
2 | < span data-bind = "click: showDescription" >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); |
15 | 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); |