KnockoutJS 3.X API 第四章之click綁定
目的
click綁定主要作用是用于DOM元素被點擊時調用相關JS函數(shù)。最常見用于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>
如上述例子，沒點過button被點擊時都會觸發(fā)incrementClickCounter 回調函數(shù)，從而更新視圖狀態(tài)。
備注，click后所跟的并不一定非得是視圖模型的函數(shù)?？梢允侨魏螌ο蟮暮瘮?shù)，直接引用即可。例如：click: someObject.someFunction。
備注1：傳遞一個參數(shù)
當您的處理程序中，UI展示了一個監(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>
當點擊remove時只會刪除當前的項目，從源碼上看，說明傳遞的是當前項目。這種在渲染集合數(shù)據(jù)的時候特別有用。
需要注意兩點：
如果你是一個嵌套在綁定上下文，例如，如果使用foreach或with綁定，但你的處理函數(shù)是根視圖模型或其他一些父模型，你需要使用一個前綴，如$parent或$root定位處理函數(shù)。
在您的視圖模型，但是這是可以使用self（或其他一些變量）作為this的一個別名。
備注2:傳遞事件對象(多參數(shù))
一些情況下，你可能需要訪問DOM的事件對象(event)，一般情況下KO會將事件對象作為第二個參數(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)雅的寫法，比如使用bind函數(shù)綁定多個參數(shù)。例如：
<button data-bind="click: myFunction.bind($data, 'param1', 'param2')"> Click me </button>
備注3：允許默認點擊動作
默認情況下，Ko會阻止任何默認動作。比如你把click綁定到一個a標簽上，當點擊時，瀏覽器會調用click綁定的回調函數(shù)。但是不會執(zhí)行href的連接跳轉。
如果你不希望這種默認的阻止動作?？梢栽诨卣{函數(shù)中返回true。
備注4：防止冒泡事件
默認情況下，KO允許click綁定繼續(xù)到任何高級別的事件處理。例如，父元素和子元素都有click綁定，那么這兩個元素的click綁定會都被觸發(fā)。
可以使用一個附加綁定clickBubble來解決該問題：
<div data-bind="click: myDivHandler"> <button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button> </div>
如上述例子，myButtonHandler將被調用，而附件綁定clickBubble，并設置了false，這至使父元素的myDivHandler不會被調用。
備注5：與Jquery互動
如果存在Jquery的click事件，KO將會去調用Jquery的click事件，如果你想總是使用自己本地的事件來處理，可以在ko.applyBindings中加入如下代碼：
ko.options.useOnlyNativeEvents = true;
以上所述是小編給大家介紹的KnockoutJS 3.X API 第四章之click綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流foreach綁定
- KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流if綁定和ifnot綁定
- KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流with綁定
- KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流component綁定
- KnockoutJS 3.X API 第四章之事件event綁定
- KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定
- KnockoutJS 3.X API 第四章之表單value綁定
- BootstrapTable與KnockoutJS相結合實現(xiàn)增刪改查功能【二】
- BootstrapTable與KnockoutJS相結合實現(xiàn)增刪改查功能【一】
- KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定
相關文章
JavaScript中你不知道的Object.entries用法
大家應該都知道,Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致,這篇文章主要給大家介紹了關于JavaScript中你不知道的Object.entries用法的相關資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了基于JavaScript實現(xiàn)隨機點名器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家介紹了js前端獲取用戶位置及ip屬地信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
下面小編就為大家?guī)硪黄猨s添加事件的通用方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了微信小程序制作扭蛋機代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Bootstrap入門書籍之（一）排版的相關資料,需要的朋友可以參考下2016-02-02
JavaScript中判斷頁面關閉、頁面刷新的實現(xiàn)代碼
這篇文章主要介紹了JavaScript中判斷頁面關閉、頁面刷新的實現(xiàn)代碼,在一些特殊的場合中會用到這個技術,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
iis6+javascript Add an Extension File
iis6+javascript Add an Extension File...2007-06-06
JavaScript中find()和?filter()方法的區(qū)別小結
js中find和filter方法大家在工作中會經(jīng)常遇到,那么他們有什么區(qū)別呢？這篇文章主要給大家介紹了關于JavaScript中find()和?filter()方法區(qū)別的相關資料,需要的朋友可以參考下2021-12-12