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的更多相关文章

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

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

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

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

  3. Kendo MVVM 数据绑定(五) Events

    Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 D ...

  4. Kendo MVVM 数据绑定(十) Source

    Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...

  5. Kendo MVVM 数据绑定(七) Invisible/Visible

    Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...

  6. Kendo MVVM 数据绑定(四) Disabled/Enabled

    Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元 ...

  7. Kendo MVVM 数据绑定(一) attr

    Kendo MVVM 数据绑定(一) attr Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, ...

  8. Kendo MVVM 数据绑定(十一) Value

    Kendo MVVM 数据绑定(十一) Value Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性.当用户修改 DOM 元素或 UI ...

  9. Kendo MVVM 数据绑定(九) Text

    Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...

随机推荐

  1. 非常好的LINUX学习者博客

    http://blog.csdn.net/qq_21794823/article/category/6496200

  2. java的桥接模式

    http://blog.csdn.net/jason0539/article/details/22568865 http://www.cnblogs.com/V1haoge/p/6497919.htm ...

  3. JSP环境探针-当前电脑所有系统参数

    1 <%@ page contentType="text/html;charset=gb2312" %> <%@ page import="java.u ...

  4. c程序十六进制字符串转换为整数与反转

    字符串转整数使用sscanf ; char *buf = "1d5ce"; sscanf (buf, "%x", &value); printf (&q ...

  5. Updatepanel 中使用 Timer 控件 失去焦点问题

    在Update Panel 中 如果使用timer 定时刷新数据,会造成textbox 或者其他控件的焦点丢失问题. 所以 text box 不能和timer 放在同一个Updatepanel 中. ...

  6. 防止APP退到被安卓系统清理

    一个是尽量提高APP权限,无非就是保持APP始终界面在前台 二是使用守护进程方法,被清理了立刻自己启动, 三是前台跟后台进程分开,被重启了恢复原始环境. // 申请设备电源锁,在服务start的时候. ...

  7. Halcon - 获取图像数据(灰度值)

    在 Halcon 中,或许大部分人都知道如何通过 get_grayval 获取图像的灰度值,这条算子在获取单个像素时是比较好用的.但是当你想获取一幅大尺寸图像的一行甚至所有的灰度数据时,它就会变得很吃 ...

  8. java反射机制基础总结

    1反射机制是啥? 反射是运行中的程序检查自己和软件运行环境的能力,它可以根据它发现的进行改变.通俗的讲就是反射可以在运行时根据指定的类名获得类的信息. 2反射机制有啥用? Reflection(反射) ...

  9. Tcp编程demo之三部曲

    下面的demo的目的是通过代码来快速的了解tcp编程的步骤 1首先呢,对InetAddress类简单了解其作用 public static void main(String[] args) throw ...

  10. windows cmd 新建和删除文件

    1.新建文件夹 # 新建App文件夹 md app # 或者使用 mkdir mkdir app 2.新建文件 # 进入App文件夹cd app # 新建 index.js 文件 type nul&g ...