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用法，這是內置綁定中使用比較多的一個~。

感謝支持

最近要趁着年末的機會，擠出點時間，把這個系列繼續下去，請大家多多支持，給點動力哈~

如果本文對您有幫助的話，請別吝嗇手中的推薦票哦~