Kendo MVVM 数据绑定(五) Events
Kendo MVVM 数据绑定(五) Events
本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式。Events 绑定支持将 ViewModel 的方法绑定到 DOM 元素的事件处理(如鼠标事件)。例如:
<div id="view">
<span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
<span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
var viewModel = kendo.observable({
description: "Description",
isDescriptionShown: false,
showDescription: function (e) {
// show the span by setting isDescriptionShown to true
this.set("isDescriptionShown", true);
},
hideDescription: function (e) {
// hide the span by setting isDescriptionShown to false
this.set("isDescriptionShown", false);
}
}); kendo.bind($("#view"), viewModel);
</script>
实际上,click 绑定是 events 绑定的一个特例,下面的两种实现是等效的:
<span data-bind="click: clickHandler"></span> <span data-bind="events: { click: clickHandler }"></span>
注: Kendo MVVM 的 DOM 事件参数 e 封装在 jQuery 的 Event 对象中。
中止事件向上传递
如果需要终止事件向上传递(event bubbling),可以调用 stopPropagation 方法。
<span data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
click: function(e) {
e.stopPropagation();
}
}); kendo.bind($("span"), viewModel);
</script>
停止事件缺省处理
如果要取消某些 DOM 元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用 preventDefault() 方法。例如:
<a href="http://example.com" data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
click: function(e) {
// stop the browser from navigating to http://example.com
e.preventDefault();
}
}); kendo.bind($("a"), viewModel);
</script>
Kendo MVVM 数据绑定(五) Events的更多相关文章
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- Kendo MVVM 数据绑定(三) Click
Kendo MVVM 数据绑定(三) Click Click 绑定可以把由 ViewModel 定义的方法不绑定到目标 DOM 的 click 事件.当点击目标 DOM 元素时触发 ViewModel ...
- Kendo MVVM 数据绑定(一) attr
Kendo MVVM 数据绑定(一) attr Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, ...
- Kendo MVVM 数据绑定(十一) Value
Kendo MVVM 数据绑定(十一) Value Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性.当用户修改 DOM 元素或 UI ...
- Kendo MVVM 数据绑定(十) Source
Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...
- Kendo MVVM 数据绑定(九) Text
Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...
- Kendo MVVM 数据绑定(八) Style
Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如: <span data-bind="sty ...
- Kendo MVVM 数据绑定(七) Invisible/Visible
Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...
- Kendo MVVM 数据绑定(六) Html
Kendo MVVM 数据绑定(六) Html Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性.如果 ViewModel 的属性的数据类型不是字符串 ...
随机推荐
- poj3666序列对应——DP
题目:http://poj.org/problem?id=3666 很普通的DP,离散化(sort)一下即可: mn的求法很不错(比我原来开了mn[]……简洁). 代码如下: #include< ...
- ReSIProcate源码目录下功能说明
1.basicCall,basicMessage,basicRegister,resip_test测试用的 2.db_static Sleepy Cat开发的Berkeley DB 3.dum为Dia ...
- pig ERROR 2997: Encountered IOException. File or directory null does not exist.
grunt> ls 2014-03-30 19:58:31,344 [main] ERROR org.apache.pig.tools.grunt.Grunt - ERROR 2997: Enc ...
- Spring如何引用properties文件里的…
[zt]Spring如何引用properties文件里的配置 来自 http://blog.csdn.net/luobo525/archive/2006/11/06/1370258.aspx 1.Pr ...
- SQL Server(三)
一.数据库操作 create database 数据库名称 ——创建drop database 数据库名称 ——删除use 数据库名称 ——使用go 两条SQL语句之间分隔 二.表的操作 create ...
- Unite 2017 | Unity引擎发展四大方向
Unite 2017 Shanghai已落幕,今天为大家分享本次大会备受关注的Keynote主题演讲.本次大会Keynote主题演讲聚焦了Unity全球领导团队,包括Unity创始人David Hel ...
- spring-eureka 源码解读----作为集群的eureka怎么样实现不做二次传播
在平时工作中,eureka作为一个集群时候,我们会配置多个peer ,假设当前有服务器eureka-A,eureka-B,eureka-C. 如果Eureka A的peer指向了B, B的peer指向 ...
- IT兄弟连 JavaWeb教程 异步请求对象的API
Ajax的核心是XMLHttpRequest对象(xhr),xhr为向服务器发送请求和解析服务器响应提供了接口,能够以异步的方式从服务器获取新数据. xhr的主要方法有: ● void open(S ...
- jdk及tomcat的安装
Tomcat和JDK安装指南 1 JDK的安装 要运行JAVA程序,必须安装JDK(JAVA 开发包)的支持. 1.1 安装 1.J2SDK的安装比较简单,在安装盘目录下寻找“JDK安装程序”文件 ...
- 微服务监控神器Prometheus的安装部署
本文涉及:如何在k8s下搭建Prometheus+grafana的监控环境 基本概念 Prometheus提供了容器和云原生领域数据搜集.存储.处理.可视化和告警一套完整的解决方案,最初时是由Soun ...