KnockoutJS 3.X API 第四章 表单绑定(6) click绑定
目的
click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。
例如:
源码:
- <div>
- You've clicked <span data-bind="text: numberOfClicks"></span> times
- <button data-bind="click: incrementClickCounter">Click me</button>
- </div>
- <script type="text/javascript">
- var viewModel = {
- numberOfClicks : ko.observable(0),
- incrementClickCounter : function() {
- var previousCount = this.numberOfClicks();
- this.numberOfClicks(previousCount + 1);
- }
- };
- </script>
如上述例子,没点过button被点击时都会触发incrementClickCounter 回调函数,从而更新视图状态。
备注,click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数,直接引用即可。例如:click: someObject.someFunction
。
备注1:传递一个参数
当您的处理程序中,UI展示了一个监控属性数组,例如:
- Remove
源码:
- <ul data-bind="foreach: places">
- <li>
- <span data-bind="text: $data"></span>
- <button data-bind="click: $parent.removePlace">Remove</button>
- </li>
- </ul>
- <script type="text/javascript">
- function MyViewModel() {
- var self = this;
- self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
- // The current item will be passed as the first parameter, so we know which place to remove
- self.removePlace = function(place) {
- self.places.remove(place)
- }
- }
- ko.applyBindings(new MyViewModel());
- </script>
当点击remove时只会删除当前的项目,从源码上看,说明传递的是当前项目。这种在渲染集合数据的时候特别有用。
需要注意两点:
- 如果你是一个嵌套在绑定上下文,例如,如果使用
foreach
或with绑定
,但你的处理函数是根视图模型或其他一些父模型,你需要使用一个前缀,如$parent
或$root
定位处理函数。 - 在您的视图模型,但是这是可以使用
self
(或其他一些变量)作为this的一个别名
。
备注2:传递事件对象(多参数)
一些情况下,你可能需要访问DOM的事件对象(event),一般情况下KO会将事件对象作为第二个参数传递给函数。例如:
- <button data-bind="click: myFunction">
- Click me
- </button>
- <script type="text/javascript">
- var viewModel = {
- myFunction: function(data, event) {
- if (event.shiftKey) {
- //do something different when user has shift key down
- } else {
- //do normal action
- }
- }
- };
- ko.applyBindings(viewModel);
- </script>
如果你要传递更多的参数,可以使用函数文本的方式。例如:
- <button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
- Click me
- </button>
还有更优雅的写法,比如使用bind函数绑定多个参数。例如:
- <button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
- Click me
- </button>
备注3:允许默认点击动作
默认情况下,Ko会阻止任何默认动作。比如你把click绑定到一个a标签上,当点击时,浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。
如果你不希望这种默认的阻止动作。可以在回调函数中返回true。
备注4:防止冒泡事件
默认情况下,KO允许click绑定继续到任何高级别的事件处理。例如,父元素和子元素都有click绑定,那么这两个元素的click绑定会都被触发。
可以使用一个附加绑定clickBubble来解决该问题:
- <div data-bind="click: myDivHandler">
- <button data-bind="click: myButtonHandler, clickBubble: false">
- Click me
- </button>
- </div>
如上述例子,myButtonHandler将被调用,而附件绑定clickBubble,并设置了false,这至使父元素的myDivHandler不会被调用。
备注5:与Jquery互动
如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:
- ko.options.useOnlyNativeEvents = true;
KnockoutJS 3.X API 第四章 表单绑定(6) click绑定的更多相关文章
- KnockoutJS 3.X API 第四章 表单绑定(11) options绑定
目的 options绑定主要用于下拉列表中(即<select>元素)或多选列表(例如,<select size='6'>).此绑定不能与除<select>元素之外的 ...
- KnockoutJS 3.X API 第四章 表单绑定(9) value绑定
目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...
- KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定
textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,tex ...
- KnockoutJS 3.X API 第四章 表单绑定(7) event绑定
目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...
- KnockoutJS 3.X API 第四章 表单绑定(8) submit、enable、disable绑定
submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中 ...
- KnockoutJS 3.X API 第四章 表单绑定(12) selectedOptions、uniqueName绑定
selectedOptions绑定目的 selectedOptions绑定控制当前选择多选列表中的哪些元素. 这旨在与<select>元素和选项绑定结合使用. 当用户选择或取消选择多选列表 ...
- KnockoutJS 3.X API 第四章 数据绑定(1) 文本及样式绑定
目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的 ...
- KnockoutJS 3.X API 第四章(13) template绑定
目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if, ...
- JavaScript高级程序设计学习笔记第十四章--表单
1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...
随机推荐
- http协议性能相关的技术要点
1.http协议介绍 HTTP是一种请求/响应式的协议,基于TCP协议来进行数据传输. HTTPS是HTTP协议和安全套借口层(SSL)的结合,即安全增强版的HTTP. HTTP请求由三部分组成:请求 ...
- DVDstore 数据库基准测试
1 DVDStore介绍 DVDstore 是一个电子商务测试应用,模拟多用户登陆在线系统,搜索DVD,购买DVD.多用来用作测试数据库性能或者其他的压力测试. 2 快速浏览测试步骤 (a) 安装数 ...
- 移动Web开发中遇见的问题以及解决方法(不断更新中)
20160524 问题:在使用des加密数据后,作为url参数传递发现,系统会把+自动变为空格,以至于解密的时候出现问题. 例如:uKsRUwdU6+83+J9WfgfflA== 传到服务端后 变为u ...
- wpf 报错: 在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh”。
今天修改Bug的时候遇到一个问题: datagrid 设置了双击事件,双击弹出一个窗口,在多次点击后报错:在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh” 网上查了 ...
- 首次创建maven项目的准备工作
需要JDK1.5以上.Eclipse.maven maven下载地址:http://maven.apache.org/download.cgi 1.配置环境变量新建系统变量M2_HOME 2.运行cm ...
- jquery datepicker 只显示年月
首先修改默认日期赋值 <script type="text/javascript"> $(function(){ $('#searchDate').datepicker ...
- 【摘】【网络】无线AP与无线路由器有什么区别?
参考网站: 1.无线上网百科 http://wifi.baike.com/article-290204.html 图片 1 今天我们从功能.应用.组网和成本四个方面为大家区分无线路由器和无线AP.当前 ...
- Windows Server 2003搭建邮件服务器
Windows Server 2003搭建邮件服务器 由于Windows Server 2003默认是没有安装我们搭建邮件服务器所需要的POP3和SMTP服务的,因此需要我们自己来安装.方法如下: 1 ...
- 2013-09-22 [随笔]-Roy
不能因为一些小事情而一直影响自己的心情. 每天过得都应该有重点,无论是家庭还是工作还是其他. 要多花时间去吸取些新东西,看书,丰富自己的想法. 不能让日常的乱七八糟影响心情. bingo!
- 解剖SQLSERVER 第十篇 OrcaMDF Studio 发布+ 特性重温(译)
解剖SQLSERVER 第十篇 OrcaMDF Studio 发布+ 特性重温(译) http://improve.dk/orcamdf-studio-release-feature-recap/ ...