Knockout應用開發指南 第三章：綁定語法（2）

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綁定。