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>

注: 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>

 

Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click的更多相关文章

  1. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  2. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  3. Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source

    Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定,如果ViewModel的值发生变化,被绑定的目标元素也随之发生变化.模板由属性data-template指定,它的值为 ...

  4. Kendo UI开发教程(6): Kendo DataSource 概述

    Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...

  5. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

  6. Kendo UI开发教程(8): Kendo UI 特效概述

    Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...

  7. Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value

    Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...

  8. Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text

    Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind=& ...

  9. Kendo UI开发教程(25): 单页面应用(三) View

    View为屏幕上某个可视部分,可以处理用户事件. View可以通过HTML创建或是通过script元素.缺省情况下View将其所包含的内容封装在一个Div元素中.Kendo创建View有两种方式: 使 ...

随机推荐

  1. Android 计时与倒计时

    方法一 Timer与TimerTask(Java实现) [java]  view plain copy print ?   public class timerTask extends Activit ...

  2. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  3. 新发现的Cyberduck(映射网盘)和zsuncloud(硬件产品很新潮),群辉nas的确好用(购买链接)

    https://cyberduck.io/?l=en http://www.zsuncloud.com/ 群辉nas的确好用啊在哪里可以买到?官网 淘宝也可以自己做黑群晖 先用xpenoboot is ...

  4. QCompleter自动补全

     知识永远是那么多,想到什么就总结什么,今天记录一下关于我对QComplete的一些小见解.   官方文档中叙述如下:     可以在任何Qt的窗口小部件中使用QCompleter提供自动补全功能,如 ...

  5. JavaScript 进阶(二)变量作用域

    局部变量陷阱 先看一段代码: function foo() { var a = "hello" b = "world" return a + b; } 这个函数 ...

  6. Coreseek:第二步建索引及測试

    1,建索引非常easy.一行代码 g:/service/coreseek/bin/indexer -c g:/service/coreseek/etc/csft_mysql.conf   person ...

  7. (Relax 数论1.6)POJ 1061 青蛙的约会(扩展的欧几里得公式)

    /* * POJ_1061.cpp * * Created on: 2013年11月19日 * Author: Administrator */ #include <iostream> # ...

  8. metasploit学习之ms03_026

    傻瓜式利用ms03_026_dcom: Matching Modules ================ Name Disclosure Date Rank Description ---- --- ...

  9. 【ASP.NET Web API教程】2.3.6 创建产品和订单控制器

    原文:[ASP.NET Web API教程]2.3.6 创建产品和订单控制器 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. Part 6 ...

  10. 【Demo 0009】Java基础-异常

    本章学习要点:       1.  了解异常的基本概念:       2.  掌握异常捕获方法以及注意事项;       3.  掌握异常抛出方法:       4.  掌握自定义异常类和异常类继承注 ...