目的

click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。

例如:

You've clicked timesClick me

源码:

  1. <div>
  2. You've clicked <span data-bind="text: numberOfClicks"></span> times
  3. <button data-bind="click: incrementClickCounter">Click me</button>
  4. </div>
  5.  
  6. <script type="text/javascript">
  7. var viewModel = {
  8. numberOfClicks : ko.observable(0),
  9. incrementClickCounter : function() {
  10. var previousCount = this.numberOfClicks();
  11. this.numberOfClicks(previousCount + 1);
  12. }
  13. };
  14. </script>

如上述例子,没点过button被点击时都会触发incrementClickCounter 回调函数,从而更新视图状态。

备注,click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数,直接引用即可。例如:click: someObject.someFunction

备注1:传递一个参数

当您的处理程序中,UI展示了一个监控属性数组,例如:

  • Remove

源码:

  1. <ul data-bind="foreach: places">
  2. <li>
  3. <span data-bind="text: $data"></span>
  4. <button data-bind="click: $parent.removePlace">Remove</button>
  5. </li>
  6. </ul>
  7.  
  8. <script type="text/javascript">
  9. function MyViewModel() {
  10. var self = this;
  11. self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
  12.  
  13. // The current item will be passed as the first parameter, so we know which place to remove
  14. self.removePlace = function(place) {
  15. self.places.remove(place)
  16. }
  17. }
  18. ko.applyBindings(new MyViewModel());
  19. </script>

当点击remove时只会删除当前的项目,从源码上看,说明传递的是当前项目。这种在渲染集合数据的时候特别有用。

需要注意两点:

  • 如果你是一个嵌套在绑定上下文,例如,如果使用foreachwith绑定,但你的处理函数是根视图模型或其他一些父模型,你需要使用一个前缀,如$parent$root定位处理函数。

  • 在您的视图模型,但是这是可以使用self(或其他一些变量)作为this的一个别名

备注2:传递事件对象(多参数)

一些情况下,你可能需要访问DOM的事件对象(event),一般情况下KO会将事件对象作为第二个参数传递给函数。例如:

  1. <button data-bind="click: myFunction">
  2. Click me
  3. </button>
  4.  
  5. <script type="text/javascript">
  6. var viewModel = {
  7. myFunction: function(data, event) {
  8. if (event.shiftKey) {
  9. //do something different when user has shift key down
  10. } else {
  11. //do normal action
  12. }
  13. }
  14. };
  15. ko.applyBindings(viewModel);
  16. </script>

如果你要传递更多的参数,可以使用函数文本的方式。例如:

  1. <button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
  2. Click me
  3. </button>

还有更优雅的写法,比如使用bind函数绑定多个参数。例如:

  1. <button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
  2. Click me
  3. </button>

备注3:允许默认点击动作

默认情况下,Ko会阻止任何默认动作。比如你把click绑定到一个a标签上,当点击时,浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。

如果你不希望这种默认的阻止动作。可以在回调函数中返回true。

备注4:防止冒泡事件

默认情况下,KO允许click绑定继续到任何高级别的事件处理。例如,父元素和子元素都有click绑定,那么这两个元素的click绑定会都被触发。

可以使用一个附加绑定clickBubble来解决该问题:

  1. <div data-bind="click: myDivHandler">
  2. <button data-bind="click: myButtonHandler, clickBubble: false">
  3. Click me
  4. </button>
  5. </div>

如上述例子,myButtonHandler将被调用,而附件绑定clickBubble,并设置了false,这至使父元素的myDivHandler不会被调用。

备注5:与Jquery互动

如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:

  1. ko.options.useOnlyNativeEvents = true;

KnockoutJS 3.X API 第四章 表单绑定(6) click绑定的更多相关文章

  1. KnockoutJS 3.X API 第四章 表单绑定(11) options绑定

    目的 options绑定主要用于下拉列表中(即<select>元素)或多选列表(例如,<select size='6'>).此绑定不能与除<select>元素之外的 ...

  2. KnockoutJS 3.X API 第四章 表单绑定(9) value绑定

    目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...

  3. KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定

    textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,tex ...

  4. KnockoutJS 3.X API 第四章 表单绑定(7) event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...

  5. KnockoutJS 3.X API 第四章 表单绑定(8) submit、enable、disable绑定

    submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中 ...

  6. KnockoutJS 3.X API 第四章 表单绑定(12) selectedOptions、uniqueName绑定

    selectedOptions绑定目的 selectedOptions绑定控制当前选择多选列表中的哪些元素. 这旨在与<select>元素和选项绑定结合使用. 当用户选择或取消选择多选列表 ...

  7. KnockoutJS 3.X API 第四章 数据绑定(1) 文本及样式绑定

    目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的 ...

  8. KnockoutJS 3.X API 第四章(13) template绑定

    目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if, ...

  9. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

随机推荐

  1. http协议性能相关的技术要点

    1.http协议介绍 HTTP是一种请求/响应式的协议,基于TCP协议来进行数据传输. HTTPS是HTTP协议和安全套借口层(SSL)的结合,即安全增强版的HTTP. HTTP请求由三部分组成:请求 ...

  2. DVDstore 数据库基准测试

    1 DVDStore介绍 DVDstore 是一个电子商务测试应用,模拟多用户登陆在线系统,搜索DVD,购买DVD.多用来用作测试数据库性能或者其他的压力测试. 2 快速浏览测试步骤 (a)  安装数 ...

  3. 移动Web开发中遇见的问题以及解决方法(不断更新中)

    20160524 问题:在使用des加密数据后,作为url参数传递发现,系统会把+自动变为空格,以至于解密的时候出现问题. 例如:uKsRUwdU6+83+J9WfgfflA== 传到服务端后 变为u ...

  4. wpf 报错: 在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh”。

    今天修改Bug的时候遇到一个问题: datagrid 设置了双击事件,双击弹出一个窗口,在多次点击后报错:在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh” 网上查了 ...

  5. 首次创建maven项目的准备工作

    需要JDK1.5以上.Eclipse.maven maven下载地址:http://maven.apache.org/download.cgi 1.配置环境变量新建系统变量M2_HOME 2.运行cm ...

  6. jquery datepicker 只显示年月

    首先修改默认日期赋值 <script type="text/javascript"> $(function(){ $('#searchDate').datepicker ...

  7. 【摘】【网络】无线AP与无线路由器有什么区别?

    参考网站: 1.无线上网百科 http://wifi.baike.com/article-290204.html 图片 1 今天我们从功能.应用.组网和成本四个方面为大家区分无线路由器和无线AP.当前 ...

  8. Windows Server 2003搭建邮件服务器

    Windows Server 2003搭建邮件服务器 由于Windows Server 2003默认是没有安装我们搭建邮件服务器所需要的POP3和SMTP服务的,因此需要我们自己来安装.方法如下: 1 ...

  9. 2013-09-22 [随笔]-Roy

    不能因为一些小事情而一直影响自己的心情. 每天过得都应该有重点,无论是家庭还是工作还是其他. 要多花时间去吸取些新东西,看书,丰富自己的想法. 不能让日常的乱七八糟影响心情. bingo!

  10. 解剖SQLSERVER 第十篇 OrcaMDF Studio 发布+ 特性重温(译)

    解剖SQLSERVER 第十篇  OrcaMDF Studio 发布+ 特性重温(译) http://improve.dk/orcamdf-studio-release-feature-recap/ ...