本篇和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>

 

Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events的更多相关文章

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

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

  2. Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

    Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id=&q ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

随机推荐

  1. shell字符串长度

    方法一 $ expr length "Find out the length of this string from Linux Bash shell." 57 方法二 str1= ...

  2. OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)

    近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...

  3. mysql5.6 主从配置

    参考网址:http://www.cnblogs.com/zhoujie/p/mysql1.html http://kerry.blog.51cto.com/172631/277414/ 1.配置主库: ...

  4. MySQL 执行计划里的rows

    <pre name="code" class="html">SQL> alter session set statistics_level=a ...

  5. Xtrabackup使用指南 | 简单.生活

    Xtrabackup使用指南 | 简单.生活 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好 ...

  6. ibatis新手入门

    ibatis 是什么 iBATIS是以SQL为中心的持久化层框架. 能支持懒载入.关联查询.继承等特性. iBATIS不同于一般的OR映射框架. OR映射框架,将数据库表.字段等映射到类.属性,那是一 ...

  7. Python爬行动物(一):基本概念

    定义网络爬虫          网络爬虫(Web Spider,也被称为网络蜘蛛,网络机器人,也被称为网页追逐者).按照一定的规则,维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁,自己主动索引 ...

  8. ORACLE常用数据库类型(转)

    oracle常用数据类型 1.Char 定长格式字符串,在数据库中存储时不足位数填补空格,它的声明方式如下CHAR(L),L为字符串长度,缺省为1,作为变量最大32767个字符,作为数据存储在ORAC ...

  9. Android应用中Back键的监听及处理

    MainActivity如下: package cn.testnbackpressed; import android.os.Bundle; import android.view.KeyEvent; ...

  10. ovirt node的安装简介

    Ovirt安装模式  支持install,update,downupdate,reinstall四种安装方式.  install:全新安装(以前未安装过ovirt node).  update:安装比 ...