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

*本文已经同步至索引目录：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基本用法：方法绑定

http://jsfiddle.net/wbpmrck/HEpsz/4/embedded/

看不到内嵌Demo的点这里查看在线Demo

 

Demo2：演示获取当前点击的ArrayItem

http://jsfiddle.net/wbpmrck/HEpsz/5/embedded/

看不到内嵌Demo的点这里查看在线Demo

 

Demo3：演示获取当前DOM的event对象、添加自定义参数

http://jsfiddle.net/wbpmrck/HEpsz/8/embedded/

看不到内嵌Demo的点这里查看在线Demo

 

Demo4：演示如何禁用元素点击时候的默认行为(如a标签的href跳转)

http://jsfiddle.net/wbpmrck/HEpsz/9/embedded/

 

看不到内嵌Demo的点这里查看在线Demo

  

Demo5：演示如何阻止事件冒泡

 

http://jsfiddle.net/wbpmrck/HEpsz/11/embedded/

 

看不到内嵌Demo的点这里查看在线Demo

 

总结

今天主要介绍了ko中的Click Binding用法，这是内置绑定中使用比较多的一个~。

感谢支持

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

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