Javascript MVVM模式前端框架—Knockout 2.1.0系列(10)：內建綁定之——Event綁定

*本文已經同步至索引目錄：http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html

前言&基礎

 

有了上一節的基礎，今天我們看一個相對比較好理解，也比較重要的binding:event事件綁定。它提供了內置事件綁定之外的給DOM元素添加事件處理函數的機制。

正文

Event Binding

• 綁定DOM元素的指定事件到指定的函數。
• ko默認會將當前綁定的viewModel的上下文對象作為第1個參數傳入處理函數。
• ko會將Dom的event對象作為第2個參數傳入

 

實例講解：Event Binding

基本語法

Html代碼

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        Mouse over me
    </div>
    <div data-bind="visible: detailsEnabled">
        Details
    </div>
</div>

 

Js代碼

 var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel);

 

Demo1：演示Event Binding基本用法

http://jsfiddle.net/wbpmrck/PWVkx/1/embedded/

看不到內嵌Demo的點這里查看在線Demo

 

Demo2：演示獲取DOM事件參數、自定義參數

http://jsfiddle.net/wbpmrck/PWVkx/2/embedded/

看不到內嵌Demo的點這里查看在線Demo

 

總結

今天主要介紹了ko中的Event Binding用法，其實ko里所有的事件綁定都可以用它來搞定，是不是很簡單呢~。

感謝支持

精彩的還在后面，請大家多多支持，給點動力哈~

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