Kendo MVVM 数据绑定(三) Click
Kendo MVVM 数据绑定(三) Click
Click 绑定可以把由 ViewModel 定义的方法不绑定到目标 DOM 的 click 事件。当点击目标 DOM 元素时触发 ViewModel 的对应方法。例如:
使用 Click 绑定
<div id="view">
<span data-bind="click: showDescription">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);
}
}); 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 数据绑定(三) Click的更多相关文章
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id=&q ...
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- Kendo MVVM 数据绑定(五) Events
Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 D ...
- Kendo MVVM 数据绑定(十) Source
Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...
- Kendo MVVM 数据绑定(七) Invisible/Visible
Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...
- Kendo MVVM 数据绑定(四) Disabled/Enabled
Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元 ...
- 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 数据绑定(九) Text
Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...
随机推荐
- Scala学习——array与arraybuffer的区别(初)
1.由于Array是不可变的,所以不能直接地对其元素进行删除操作,只能通过重赋值或过滤生成新的Array的方式来删除不要的元素. 而ArrayBuffer是可变的,本身提供了很多元素的操作,当然包括删 ...
- 几种开源SIP协议栈对比
几种开源SIP协议栈对比 随着VoIP和NGN技术的发展,H.323时代即将过渡到SIP时代,在H.323的开源协议栈中,Openh323占统治地位,它把一个复杂而又先进的H.323协议栈展现在普通程 ...
- HTML DOM nodeType 属性
实例 获得 body 元素的节点类型: document.body.nodeType; 结果: 1 定义和用法 nodeType 属性返回以数字值返回指定节点的节点类型. 如果节点是元素节点,则 no ...
- git学习 7 git每次push都输入用户名 密码
用如下命令改成SSH的方式 git remote rm origin git remote add origin git@github.com:username/repository.git git ...
- stm32之入门知识
一.stm32最小系统 stm32最小系统组成如下(除了stm32芯片外): 1.电源模块,3.3V电源,需要用稳压器件,有时要用感容网络产生stm32所使用的模拟电源. 2.时钟模块,有源或者无源晶 ...
- 【235】Win10-Chrome 临时视频文件夹
参考:巧妙利用Chrome浏览器缓存保存网络视频参考:Win7谷歌Chrome缓存文件位置如何查看? 启动Chrome浏览器 在Chrome浏览器的地址栏输入Chrome:Version查看Chrom ...
- 11. 几点基于Web日志的Webshell检测思路
摘要: Web日志记录了网站被访问的情况,在Web安全的应用中,Web日志常被用来进行攻击事件的回溯和取证.Webshell大多由网页脚本语言编写,常被入侵者用作对网站服务器操作的后门程序,网站被植入 ...
- tcpkill工作原理分析
此文已由作者张耕源授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 日常工作生活中大家在维护自己的服务器.VPS有时会碰到这样的情况:服务器上突然出现了许多来自未知ip的网络连 ...
- [Xcode 实际操作]七、文件与数据-(6 )通过通知中心,实现监听和处理程序退出事件的功能
目录:[Swift]Xcode实际操作 本文将演示通过通知中心,实现监听和处理程序退出事件的功能. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import U ...
- XMD DTD约束 实体学习X1 普通实体 参数实体 内部实体 外部实体 内置实体 解析实体 不解析实体 实体声明 实体引用 字符引用
文档实体可能就是整个XML文档