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 的显示,需要使 ...
随机推荐
- 非常好的LINUX学习者博客
http://blog.csdn.net/qq_21794823/article/category/6496200
- java的桥接模式
http://blog.csdn.net/jason0539/article/details/22568865 http://www.cnblogs.com/V1haoge/p/6497919.htm ...
- JSP环境探针-当前电脑所有系统参数
1 <%@ page contentType="text/html;charset=gb2312" %> <%@ page import="java.u ...
- c程序十六进制字符串转换为整数与反转
字符串转整数使用sscanf ; char *buf = "1d5ce"; sscanf (buf, "%x", &value); printf (&q ...
- Updatepanel 中使用 Timer 控件 失去焦点问题
在Update Panel 中 如果使用timer 定时刷新数据,会造成textbox 或者其他控件的焦点丢失问题. 所以 text box 不能和timer 放在同一个Updatepanel 中. ...
- 防止APP退到被安卓系统清理
一个是尽量提高APP权限,无非就是保持APP始终界面在前台 二是使用守护进程方法,被清理了立刻自己启动, 三是前台跟后台进程分开,被重启了恢复原始环境. // 申请设备电源锁,在服务start的时候. ...
- Halcon - 获取图像数据(灰度值)
在 Halcon 中,或许大部分人都知道如何通过 get_grayval 获取图像的灰度值,这条算子在获取单个像素时是比较好用的.但是当你想获取一幅大尺寸图像的一行甚至所有的灰度数据时,它就会变得很吃 ...
- java反射机制基础总结
1反射机制是啥? 反射是运行中的程序检查自己和软件运行环境的能力,它可以根据它发现的进行改变.通俗的讲就是反射可以在运行时根据指定的类名获得类的信息. 2反射机制有啥用? Reflection(反射) ...
- Tcp编程demo之三部曲
下面的demo的目的是通过代码来快速的了解tcp编程的步骤 1首先呢,对InetAddress类简单了解其作用 public static void main(String[] args) throw ...
- windows cmd 新建和删除文件
1.新建文件夹 # 新建App文件夹 md app # 或者使用 mkdir mkdir app 2.新建文件 # 进入App文件夹cd app # 新建 index.js 文件 type nul&g ...