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 的显示,需要使 ...
随机推荐
- poj1742硬币——多重背包可行性
题目:http://poj.org/problem?id=1742 贪心地想,1.如果一种面值已经可以被组成,则不再对它更新: 2.对于同一种面值的硬币,尽量用较少硬币(一个)更新,使后面可以用更多此 ...
- 洛谷P1941飞扬的小鸟——细节DP
题目:https://www.luogu.org/problemnew/show/P1941 此题主要注意许多细节,详见代码. 代码如下: #include<iostream> #incl ...
- Java多线程加强
一.传统多线程 public void start() Causes this thread to begin execution; the Java Virtual Machine calls th ...
- ubuntu下 修改主机名
sudo gedit /etc/hostname 写入: sudo gedit /etc/hosts
- nagios客户端安装与配置windows篇
一.被监控的windows xp客户端的配置 1.安装NSClient++并安装下载地址: http://sourceforge.net/projects/nscplusNSClient++-0.3. ...
- java基础知识 学习 关于URL中传递的参数含有特殊字符
有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.下表中列出了一些URL特殊符号及编码 ...
- synchronized用法详解
1.介绍 Java语言的关键字,可用来给对象和方法或者代码块加锁,当它锁定一个方法或者一个代码块的时候,同一时刻最多只有一个线程执行这段代码.当两个并发线程访问同一个对象object中的这个加锁同步代 ...
- Spring入门第二十一课
切面优先级 先看代码: package logan.study.aop.impl; public interface ArithmeticCalculator { int add(int i, int ...
- metasploit msfconsole 命令
metasploit msfconsole 命令 msf > help db_autopwn Commands =================== Command Description - ...
- CQL查Cassandra条目数中的小问题
用查询语句:SELECT count(*) FROM tablename 返回类型是ResultSet,得到tablename中所有条目数 ResultSet类型可以直接用index访问:Result ...