綁定語(yǔ)法（2）

7?? click 綁定

目的

click綁定在DOM元素上添加事件句柄以便元素被點(diǎn)擊的時(shí)候執(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ǎn)擊按鈕的時(shí)候，都會(huì)調(diào)用incrementClickCounter()函數(shù)，然后更新自動(dòng)更新點(diǎn)擊次數(shù)。

參數(shù)

???主參數(shù)

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

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

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

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

??????? 無(wú)

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

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

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

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

注2：訪問(wèn)事件源對(duì)象

有些情況，你可能需要使用事件源對(duì)象，Knockout會(huì)將這個(gè)對(duì)象傳遞到你函數(shù)的第一個(gè)參數(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ù)的第一個(gè)參數(shù)傳進(jìn)去，然后在里面調(diào)用：

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

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

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

默認(rèn)情況下，Knockout會(huì)阻止冒泡，防止默認(rèn)的事件繼續(xù)執(zhí)行。例如，如果你點(diǎn)擊一個(gè)a連接，在執(zhí)行完自定義事件時(shí)它不會(huì)連接到href地址。這特別有用是因?yàn)槟愕淖远x事件主要就是操作你的view model，而不是連接到另外一個(gè)頁(yè)面。

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

注4：控制this句柄

初學(xué)者可以忽略這小節(jié)，因?yàn)榇蟛糠侄加貌恢?，高?jí)用戶可以參考如下內(nèi)容：

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

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

• 你可以和注1里那樣使用匿名函數(shù)，因?yàn)樗С秩我釰avaScript 對(duì)象。

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

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

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

在注1里使用匿名函數(shù)的時(shí)候沒(méi)有具體的要求，因?yàn)镴avaScript代碼?someObject.someFunction()就意味著調(diào)用someFunction，然后設(shè)置this到 someObject對(duì)象上。

注5：防止事件冒泡

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

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

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

依賴性

除KO核心類庫(kù)外，無(wú)依賴。

8?? event 綁定

目的

event綁定在DOM元素上添加指定的事件句柄以便元素被觸發(fā)的時(shí)候執(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>

每次鼠標(biāo)在第一個(gè)元素上移入移出的時(shí)候都會(huì)調(diào)用view model上的方法來(lái)toggle detailsEnabled的值，而第二個(gè)元素會(huì)根據(jù)detailsEnabled的值自動(dòng)顯示或者隱藏。

參數(shù)

???主參數(shù)

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

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

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

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

??????? 無(wú)

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

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

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

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

注2：訪問(wèn)事件源對(duì)象

有些情況，你可能需要使用事件源對(duì)象，Knockout會(huì)將這個(gè)對(duì)象傳遞到你函數(shù)的第一個(gè)參數(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ù)的第一個(gè)參數(shù)傳進(jìn)去，然后在里面調(diào)用：

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

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

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

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

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

注4：控制this句柄

初學(xué)者可以忽略這小節(jié)，因?yàn)榇蟛糠侄加貌恢?，高?jí)用戶可以參考如下內(nèi)容：

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

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

• 你可以和注1里那樣使用匿名函數(shù)，因?yàn)樗С秩我釰avaScript 對(duì)象。
• 你也可以直接引用任何函數(shù)對(duì)象。你可以使用bind使callback函數(shù)設(shè)置this為任何你選擇的對(duì)象。例如：

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

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

在注1里使用匿名函數(shù)的時(shí)候沒(méi)有具體的要求，因?yàn)镴avaScript代碼 someObject.someFunction()就意味著調(diào)用someFunction，然后設(shè)置this到 someObject對(duì)象上。

注5：防止事件冒泡

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

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

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

依賴性

除KO核心類庫(kù)外，無(wú)依賴。

9?? submit 綁定

目的

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

當(dāng)你使用submit綁定的時(shí)候， Knockout會(huì)阻止form表單默認(rèn)的submit動(dòng)作。換句話說(shuō)，瀏覽器會(huì)執(zhí)行你定義的綁定函數(shù)而不會(huì)提交這個(gè)form表單到服務(wù)器上?？梢院芎玫亟忉屵@個(gè)，使用submit綁定就是為了處理view model的自定義函數(shù)的，而不是再使用普通的HTML form表單。如果你要繼續(xù)執(zhí)行默認(rèn)的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>

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

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

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

參數(shù)

????主參數(shù)

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

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

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

???其它參數(shù)

??????? 無(wú)

備注：

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

依賴性

除KO核心類庫(kù)外，無(wú)依賴。

10 ? enable 綁定

目的

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

這個(gè)例子里，“Your cellphone number”后的text box 初始情況下是禁用的，只有當(dāng)用戶點(diǎn)擊標(biāo)簽 “I have a cellphone”的時(shí)候才可用。

參數(shù)

????主參數(shù)

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

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

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

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

??????? ?無(wú)

注：任意使用JavaScript表達(dá)式

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

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

依賴性

除KO核心類庫(kù)外，無(wú)依賴。

11 ? disable 綁定

目的

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

disable綁定和enable綁定正好相反，詳情請(qǐng)參考enable綁定。