湯姆大叔的博客

7   click 綁定

目的

click綁定在DOM元素上添加事件句柄以便元素被點擊的時候執行定義的JavaScript 函數。大部分是用在button，input和連接a上，但是可以在任意元素上使用。

例子

<div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>


<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function () {
            var previousCount =this.numberOfClicks();
            this.numberOfClicks(previousCount +1);
        }
    };
</script>

每次點擊按鈕的時候，都會調用incrementClickCounter()函數，然后更新自動更新點擊次數。

參數

    主參數

    Click點擊事件時所執行的函數。

    你可以聲明任何JavaScript函數 – 不一定非要是view model里的函數。你可以聲明任意對象上的任何函數，例如： someObject.someFunction。

    View model上的函數在用的時候有一點點特殊，就是不需要引用對象的，直接引用函數本身就行了，比如直接寫incrementClickCounter 就可以了，而無需寫成： viewModel.incrementClickCounter（盡管是合法的）。

    其它參數

        無

注1：傳參數給你的click 句柄

最簡單的辦法是傳一個function包裝的匿名函數：

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

這樣，KO就會調用這個匿名函數，里面會執行viewModel.myFunction()，并且傳進了'param1' 和'param2'參數。

注2：訪問事件源對象

有些情況，你可能需要使用事件源對象，Knockout會將這個對象傳遞到你函數的第一個參數：

<button data-bind="click: myFunction">
    Click me
</button>


 <script type="text/javascript">
     var viewModel = {
         myFunction: function (event) {
             if (event.shiftKey) {
                 //do something different when user has shift key down
             } else {
                 //do normal action
             }
         }
     };
</script>

如果你需要的話，可以使用匿名函數的第一個參數傳進去，然后在里面調用：

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

這樣，KO就會將事件源對象傳遞給你的函數并且使用了。

注3: 允許執行默認事件

默認情況下，Knockout會阻止冒泡，防止默認的事件繼續執行。例如，如果你點擊一個a連接，在執行完自定義事件時它不會連接到href地址。這特別有用是因為你的自定義事件主要就是操作你的view model，而不是連接到另外一個頁面。

當然，如果你想讓默認的事件繼續執行，你可以在你click的自定義函數里返回true。

注4：控制this句柄

初學者可以忽略這小節，因為大部分都用不著，高級用戶可以參考如下內容：

KO在調用你定義的函數時，會將view model傳給this對象（也就是ko.applyBindings使用的view model）。主要是方便你在調用你在view model里定義的方法的時候可以很容易再調用view model里定義的其它屬性。例如： this.someOtherViewModelProperty。

如果你想引用其它對象，我們有兩種方式：

• 你可以和注1里那樣使用匿名函數，因為它支持任意JavaScript 對象。

• 你也可以直接引用任何函數對象。你可以使用bind使callback函數設置this為任何你選擇的對象。例如：

<button data-bind="click: someObject.someFunction.bind(someObject)">
    Click me
</button>

如果你是C#或Java開發人員，你可以疑惑為什么我們還要用bind函數到一個對象想，特別是像調用someObject.someFunction。 原因是在JavaScript里，函數自己不是類的一部分，他們在單獨存在的對象，有可能多個對象都引用同樣的someFunction函數，所以當這個函數被調用的時候它不知道誰調用的（設置this給誰）。在你bind之前運行時是不會知道的。KO默認情況下設置this對象是view model，但你可以用bind語法重定義它。

在注1里使用匿名函數的時候沒有具體的要求，因為JavaScript代碼 someObject.someFunction()就意味著調用someFunction，然后設置this到 someObject對象上。

注5：防止事件冒泡

默認情況下，Knockout允許click事件繼續在更高一層的事件句柄上冒泡執行。例如，如果你的元素和父元素都綁定了click事件，那當你點擊該元素的時候兩個事件都會觸發的。如果需要，你可以通過額外的綁定clickBubble來禁止冒泡。例如：

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

默認情況下，myButtonHandler會先執行，然后會冒泡執行myDivHandler。但一旦你設置了clickBubble為false的時候，冒泡事件會被禁止。

依賴性

除KO核心類庫外，無依賴。

8   event 綁定

目的

event綁定在DOM元素上添加指定的事件句柄以便元素被觸發的時候執行定義的JavaScript 函數。大部分情況下是用在keypress，mouseover和mouseout上。

例子

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


<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function () {
            this.detailsEnabled(true);
        },
        disableDetails: function () {
            this.detailsEnabled(false);
        }
    };
</script>

每次鼠標在第一個元素上移入移出的時候都會調用view model上的方法來toggle detailsEnabled的值，而第二個元素會根據detailsEnabled的值自動顯示或者隱藏。

參數

    主參數

    你需要傳入的是一個JavaScript對象，他的屬性名是事件名稱，值是你所需要執行的函數。

    你可以聲明任何JavaScript函數 – 不一定非要是view model里的函數。你可以聲明任意對象上的任何函數，例如： event: { mouseover: someObject.someFunction }。

    View model上的函數在用的時候有一點點特殊，就是不需要引用對象的，直接引用函數本身就行了，比如直接寫event: { mouseover: enableDetails } 就可以了，而無需寫成： event: { mouseover: viewModel.enableDetails }（盡管是合法的）。

    其它參數

        無

注1：傳參數給你的click 句柄

最簡單的辦法是傳一個function包裝的匿名函數：

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

這樣，KO就會調用這個匿名函數，里面會執行viewModel.myFunction()，并且傳進了'param1' 和'param2'參數。

注2：訪問事件源對象

有些情況，你可能需要使用事件源對象，Knockout會將這個對象傳遞到你函數的第一個參數：

<div data-bind="event: { mouseover: myFunction }">
    Mouse over me
</div>

 
 <script type="text/javascript">
     var viewModel = {
         myFunction: function (event) {
             if (event.shiftKey) {
                 //do something different when user has shift key down
             } else {
                 //do normal action
             }
         }
     };
</script>

如果你需要的話，可以使用匿名函數的第一個參數傳進去，然后在里面調用：

<div data-bind="event: { mouseover: function(event) { viewModel.myFunction(event, 'param1', 'param2') } }">
    Mouse over me
</div>

這樣，KO就會將事件源對象傳遞給你的函數并且使用了。

注3: 允許執行默認事件

默認情況下，Knockout會阻止冒泡，防止默認的事件繼續執行。例如，如果在一個input標簽上綁定一個keypress事件，當你輸入內容的時候，瀏覽器只會調用你的函數而不是天價你輸入的值。另外一個例子click綁定，當你點擊一個a連接，在執行完自定義事件時它不會連接到href地址。因為你的自定義事件主要就是操作你的view model，而不是連接到另外一個頁面。

當然，如果你想讓默認的事件繼續執行，你可以在你event的自定義函數里返回true。

注4：控制this句柄

初學者可以忽略這小節，因為大部分都用不著，高級用戶可以參考如下內容：

KO在調用你定義的event綁定函數時，會將view model傳給this對象（也就是ko.applyBindings使用的view model）。主要是方便你在調用你在view model里定義的方法的時候可以很容易再調用view model里定義的其它屬性。例如： this.someOtherViewModelProperty。

如果你想引用其它對象，我們有兩種方式：

• 你可以和注1里那樣使用匿名函數，因為它支持任意JavaScript 對象。
• 你也可以直接引用任何函數對象。你可以使用bind使callback函數設置this為任何你選擇的對象。例如：

<div data-bind="event: { mouseover: someObject.someFunction.bind(someObject) }">
    Mouse over me
</div>

如果你是C#或Java開發人員，你可以疑惑為什么我們還要用bind函數到一個對象想，特別是像調用someObject.someFunction。 原因是在JavaScript里，函數自己不是類的一部分，他們在單獨存在的對象，有可能多個對象都引用同樣的someFunction函數，所以當這個函數被調用的時候它不知道誰調用的（設置this給誰）。在你bind之前運行時是不會知道的。KO默認情況下設置this對象是view model，但你可以用bind語法重定義它。

在注1里使用匿名函數的時候沒有具體的要求，因為JavaScript代碼 someObject.someFunction()就意味著調用someFunction，然后設置this到 someObject對象上。

注5：防止事件冒泡

默認情況下，Knockout允許event事件繼續在更高一層的事件句柄上冒泡執行。例如，如果你的元素和父元素都綁定了mouseover事件，那么如果你的鼠標在該元素移動的時候兩個事件都會觸發的。如果需要，你可以通過額外的綁定youreventBubble來禁止冒泡。例如：

<div data-bind="event: { mouseover: myDivHandler }">
    <button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
        Click me
    </button>
</div>

默認情況下，myButtonHandler會先執行，然后會冒泡執行myDivHandler。但一旦你設置了mouseoverBubble為false的時候，冒泡事件會被禁止。

依賴性

除KO核心類庫外，無依賴。

9   submit 綁定

目的

submit綁定在form表單上添加指定的事件句柄以便該form被提交的時候執行定義的JavaScript 函數。只能用在表單form元素上。

當你使用submit綁定的時候， Knockout會阻止form表單默認的submit動作。換句話說，瀏覽器會執行你定義的綁定函數而不會提交這個form表單到服務器上?？梢院芎玫亟忉屵@個，使用submit綁定就是為了處理view model的自定義函數的，而不是再使用普通的HTML form表單。如果你要繼續執行默認的HTML form表單操作，你可以在你的submit句柄里返回true。

例子

<form data-bind="submit: doSomething">
    ... form contents go here ...
    <button type="submit">Submit</button>
</div>

<script type="text/javascript">
    var viewModel = {
        doSomething: function (formElement) {
            // ... now do something
        }
    };
</script>

這個例子里，KO將把整個form表單元素作為參數傳遞到你的submit綁定函數里。 你可以忽略不管，但是有些例子里是否有用，參考：ko.postJson工具。

為什么不在submit按鈕上使用click綁定？

在form上，你可以使用click綁定代替submit綁定。不過submit可以handle其它的submit行為，比如在輸入框里輸入回車的時候可以提交表單。

參數

    主參數

    你綁定到submit事件上的函數

    你可以聲明任何JavaScript函數 – 不一定非要是view model里的函數。你可以聲明任意對象上的任何函數，例如： submit: someObject.someFunction。

    View model上的函數在用的時候有一點點特殊，就是不需要引用對象的，直接引用函數本身就行了，比如直接寫submit: doSomething就可以了，而無需寫成： submit: viewModel. doSomething（盡管是合法的）。

    其它參數

        無

備注：

關于如果傳遞更多的參數給submit綁定函數，或者當調用非view model里的函數的時如何控制this，請參考click綁定。所有click綁定相關的notes也都適用于submit綁定。

依賴性

除KO核心類庫外，無依賴。

10   enable 綁定

目的

enable綁定使DOM元素只有在參數值為 true的時候才enabled。在form表單元素input，select，和textarea上非常有用。

例子

<p>
    <input type='checkbox' data-bind="checked: hasCellphone"/>
    I have a cellphone
</p>

<p>
    Your cellphone number:
    <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone"/>
</p>
 
<script type="text/javascript">
    var viewModel = {
        hasCellphone: ko.observable(false),
        cellphoneNumber: ""
    };
</script>

這個例子里，“Your cellphone number”后的text box 初始情況下是禁用的，只有當用戶點擊標簽 “I have a cellphone”的時候才可用。

參數

    主參數

    聲明DOM元素是否可用enabled。

    非布爾值會被解析成布爾值。例如0和null被解析成false，21和非null對象被解析給true。

    如果你的參數是observable的，那綁定會隨著observable值的改變而自動更新enabled/disabled狀態。如果不是，則只會設置一次并且以后不再更新。

    其它參數

         無

注：任意使用JavaScript表達式

不緊緊限制于變量 – 你可以使用任何JavaScript表達式來控制元素是否可用。例如,

<button data-bind="enabled: parseAreaCode(viewModel.cellphoneNumber()) != '555'">
    Do something
</button>

依賴性

除KO核心類庫外，無依賴。

11   disable 綁定

目的

disable綁定使DOM元素只有在參數值為 true的時候才disabled。在form表單元素input，select，和textarea上非常有用。

disable綁定和enable綁定正好相反，詳情請參考enable綁定。