目的

click綁定主要作用是用于DOM元素被點(diǎn)擊時(shí)調(diào)用相關(guān)JS函數(shù)。最常見(jiàn)用于button、input、a元素。

例如：

You've clicked 0timesClick me

源碼：

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

如上述例子，沒(méi)點(diǎn)過(guò)button被點(diǎn)擊時(shí)都會(huì)觸發(fā)incrementClickCounter 回調(diào)函數(shù)，從而更新視圖狀態(tài)。

備注，click后所跟的并不一定非得是視圖模型的函數(shù)。可以是任何對(duì)象的函數(shù)，直接引用即可。例如：click: someObject.someFunction。

備注1：傳遞一個(gè)參數(shù)

當(dāng)您的處理程序中，UI展示了一個(gè)監(jiān)控屬性數(shù)組，例如：

LondonRemove
ParisRemove
TokyoRemove

源碼：

<ul data-bind="foreach: places">
<li>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
// The current item will be passed as the first parameter, so we know which place to remove
self.removePlace = function(place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script>

當(dāng)點(diǎn)擊remove時(shí)只會(huì)刪除當(dāng)前的項(xiàng)目，從源碼上看，說(shuō)明傳遞的是當(dāng)前項(xiàng)目。這種在渲染集合數(shù)據(jù)的時(shí)候特別有用。

需要注意兩點(diǎn)：

如果你是一個(gè)嵌套在綁定上下文，例如，如果使用foreach或with綁定，但你的處理函數(shù)是根視圖模型或其他一些父模型，你需要使用一個(gè)前綴，如$parent或$root定位處理函數(shù)。
在您的視圖模型，但是這是可以使用self（或其他一些變量）作為this的一個(gè)別名。

備注2:傳遞事件對(duì)象(多參數(shù))

一些情況下，你可能需要訪問(wèn)DOM的事件對(duì)象(event)，一般情況下KO會(huì)將事件對(duì)象作為第二個(gè)參數(shù)傳遞給函數(shù)。例如：

<button data-bind="click: myFunction">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>

如果你要傳遞更多的參數(shù)，可以使用函數(shù)文本的方式。例如：

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

還有更優(yōu)雅的寫(xiě)法，比如使用bind函數(shù)綁定多個(gè)參數(shù)。例如：

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

備注3：允許默認(rèn)點(diǎn)擊動(dòng)作

默認(rèn)情況下，Ko會(huì)阻止任何默認(rèn)動(dòng)作。比如你把click綁定到一個(gè)a標(biāo)簽上，當(dāng)點(diǎn)擊時(shí)，瀏覽器會(huì)調(diào)用click綁定的回調(diào)函數(shù)。但是不會(huì)執(zhí)行href的連接跳轉(zhuǎn)。

如果你不希望這種默認(rèn)的阻止動(dòng)作?？梢栽诨卣{(diào)函數(shù)中返回true。

備注4：防止冒泡事件

默認(rèn)情況下，KO允許click綁定繼續(xù)到任何高級(jí)別的事件處理。例如，父元素和子元素都有click綁定，那么這兩個(gè)元素的click綁定會(huì)都被觸發(fā)。

可以使用一個(gè)附加綁定clickBubble來(lái)解決該問(wèn)題：

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

如上述例子，myButtonHandler將被調(diào)用，而附件綁定clickBubble，并設(shè)置了false，這至使父元素的myDivHandler不會(huì)被調(diào)用。

備注5：與Jquery互動(dòng)

如果存在Jquery的click事件，KO將會(huì)去調(diào)用Jquery的click事件，如果你想總是使用自己本地的事件來(lái)處理，可以在ko.applyBindings中加入如下代碼：

ko.options.useOnlyNativeEvents = true;

以上所述是小編給大家介紹的KnockoutJS 3.X API 第四章之click綁定，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論