Javascript MVVM模式前端框架—Knockout 2.1.0系列(9)：内建绑定之——C

Javascript MVVM模式前端框架—Knockout 2.1.0系列(9)：内建绑定之——Click绑定

2013-01-24 09:19 by 刺客之家, 140 阅读, 2 评论, 收藏 , 编辑

*本文已经同步至索引目录： http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html
前言&基础
惯例吐槽几句先。最近快过年了，手头上的事情才稍微少了点，终于有时间继续整理以前的学习记录，分享给大家。

PS:最近花了点时间看了一下其他一些前端框架比如backbone.js,angularJS,发现knockout.js和他们比起来，还是有自己的特点和优势的。等以后对几个框架都有了更多了解之后，再总结一下他们的异同~

再PS:由于最近太懒了，直接导致当初准备总结的2.1.0版本已经落后现在官方的2.2.1版本了，不过好在自从2.1.0之后，貌似API没有什么调整，功能也还是那么多，就是修改了一些bug.所以大家可以不用担心。。

今天我们开始进入到丰富的内建绑定内容。在ko中，贴心的为开发者内置了几乎开发所需的所有binding的API,我们只需要知道如何使用好它们，就可以简单的实现需要的功能。下面就开始熟悉第一个重要的binding: click事件绑定
正文
Click Binding 绑定DOM元素的单击事件到指定的函数。如果是在一个foreach绑定上下文内部，使用click绑定，则会自动获取当前的数据对象作为第一个参数，传入到click事件。 click事件默认的参数第2个是事件对象evt,如果还需要更多的参数，则需要自己在外部包装一层函数( 不过笔者认为这种场景非常少，且可以通过其他方式获取参数 )
实例讲解：Click Binding
基本语法
Html代码
 <  button   data-bind  ="click: myFunction"  >  
    Click me
  </  button  > 
Js代码
  var  viewModel =  {
        myFunction:   function  (data, event) {
               alert('clicked!')   
        }
    };
    ko.applyBindings(viewModel); 
Demo1：演示Click Binding基本用法：方法绑定
看不到内嵌Demo的点这里查看在线Demo

Demo2：演示获取当前点击的ArrayItem
看不到内嵌Demo的点这里查看在线Demo

Demo3：演示获取当前DOM的event对象、添加自定义参数
看不到内嵌Demo的点这里查看在线Demo

Demo4：演示如何禁用元素点击时候的默认行为(如a标签的href跳转)
看不到内嵌Demo的点这里查看在线Demo

Demo5：演示如何阻止事件冒泡
看不到内嵌Demo的点这里查看在线Demo
总结
今天主要介绍了ko中的Click Binding用法，这是内置绑定中使用比较多的一个~。

感谢支持
最近要趁着年末的机会，挤出点时间，把这个系列继续下去，请大家多多支持，给点动力哈~

如果本文对您有帮助的话，请别吝啬手中的推荐票哦~

本博客文章若非标记转载，均为原创，转载请注明出处 ~

分类: [12]JavaScript , [B1]Knockout.js

标签: knockout.js , MVVM

作者： Leo_wl
　　　　
出处： http://www.cnblogs.com/Leo_wl/
　　　　
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息

查看更多关于Javascript MVVM模式前端框架—Knockout 2.1.0系列(9)：内建绑定之——C的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did47075

更新时间：2022-09-24 阅读：42次