綁定語法（2）

7?? click 綁定

目的

click綁定在DOM元素上添加事件句柄以便元素被點擊的時候執(zhí)行定義的JavaScript 函數(shù)。大部分是用在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>

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

參數(shù)

???主參數(shù)

??? Click點擊事件時所執(zhí)行的函數(shù)。

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

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

????其它參數(shù)

??????? 無

注1：傳參數(shù)給你的click 句柄

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

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

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

注2：訪問事件源對象

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

<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>

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

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

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

注3: 允許執(zhí)行默認事件

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

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

注4：控制this句柄

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

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

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

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

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

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

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

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

注5：防止事件冒泡

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

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

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

依賴性

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

8?? event 綁定

目的

event綁定在DOM元素上添加指定的事件句柄以便元素被觸發(fā)的時候執(zhí)行定義的JavaScript 函數(shù)。大部分情況下是用在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>

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

參數(shù)

???主參數(shù)

??? 你需要傳入的是一個JavaScript對象，他的屬性名是事件名稱，值是你所需要執(zhí)行的函數(shù)。

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

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

????其它參數(shù)

??????? 無

注1：傳參數(shù)給你的click 句柄

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

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

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

注2：訪問事件源對象

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

<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>

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

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

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

注3: 允許執(zhí)行默認事件

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

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

注4：控制this句柄

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

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

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

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

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

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

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

注5：防止事件冒泡

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

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

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

依賴性

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

9?? submit 綁定

目的

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

當你使用submit綁定的時候， Knockout會阻止form表單默認的submit動作。換句話說，瀏覽器會執(zhí)行你定義的綁定函數(shù)而不會提交這個form表單到服務器上?？梢院芎玫亟忉屵@個，使用submit綁定就是為了處理view model的自定義函數(shù)的，而不是再使用普通的HTML form表單。如果你要繼續(xù)執(zhí)行默認的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表單元素作為參數(shù)傳遞到你的submit綁定函數(shù)里。 你可以忽略不管，但是有些例子里是否有用，參考：ko.postJson工具。

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

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

參數(shù)

????主參數(shù)

??? 你綁定到submit事件上的函數(shù)

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

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

???其它參數(shù)

??????? 無

備注：

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

依賴性

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

10 ? enable 綁定

目的

enable綁定使DOM元素只有在參數(shù)值為 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”的時候才可用。

參數(shù)

????主參數(shù)

??? 聲明DOM元素是否可用enabled。

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

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

????其它參數(shù)

??????? ?無

注：任意使用JavaScript表達式

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

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

依賴性

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

11 ? disable 綁定

目的

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

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