Knockout是一個以數(shù)據(jù)模型（data model）為基礎(chǔ)的能夠幫助你創(chuàng)建富文本，響應(yīng)顯示和編輯用戶界面的JavaScript類庫。這篇文章介紹了KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定的相關(guān)知識，感興趣的朋友一起看看吧

Knockout是一個以數(shù)據(jù)模型（data model）為基礎(chǔ)的能夠幫助你創(chuàng)建富文本，響應(yīng)顯示和編輯用戶界面的JavaScript類庫。任何時候如果你的UI需要自動更新（比如：更新依賴于用戶的行為或者外部數(shù)據(jù)源的改變），KO能夠很簡單的幫你實現(xiàn)并且很容易維護。

submit綁定目的

submit綁定即為提交綁定，通常用于form元素。這種綁定方式會打斷默認(rèn)的提交至服務(wù)器的操作。轉(zhuǎn)而提交到你設(shè)定好的提交綁定回調(diào)函數(shù)中。如果要打破這個默認(rèn)規(guī)則，只需要在回調(diào)函數(shù)中返回true即可。

例如：

<form data-bind="submit: doSomething">
... form contents go here ...
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
var viewModel = {
doSomething : function(formElement) {
// ... now do something
}
};
</script>

在回調(diào)函數(shù)中，你可以做很多事情，比如前端數(shù)據(jù)驗證if ($(formElement).valid()) { /* do something */ }。等等。

enable綁定目的

enable綁定主要用于DOM元素的啟用禁用狀態(tài)，通常用于input,select或者textarea。例如：

I have a cellphone

Your cellphone number:

源碼：

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

disable綁定目的

disable綁定與enable綁定整好相反，你可以參考enable。

您可能感興趣的文章:

相關(guān)文章

JS簡單測試循環(huán)運行時間的方法
這篇文章主要介紹了JS簡單測試循環(huán)運行時間的方法,涉及針對javascript中for循環(huán)、for...in循環(huán)及foreach循環(huán)的相關(guān)使用方法及運行時間測試,需要的朋友可以參考下
2016-09-09
webpack構(gòu)建的詳細流程探底
目前，幾乎所有業(yè)務(wù)的開發(fā)構(gòu)建都會用到 webpack 。所以下面這篇文章主要給大家介紹了關(guān)于webpack構(gòu)建的詳細流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2018-01-01
谷歌瀏覽器 insertCell與appendChild的區(qū)別
table中增加單元格時在谷歌瀏覽器中使用insertCell方法增加列時，顯示結(jié)果的先后順序與程序執(zhí)行的先后順序相反
2009-02-02
Javascript File和Blob詳解
這篇文章主要為大家介紹了Javascript File和Blob，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
createElement與createDocumentFragment的點點區(qū)別小結(jié)
在DOM操作里，createElement是創(chuàng)建一個新的節(jié)點，createDocumentFragment是創(chuàng)建一個文檔片段
2011-12-12
深入理解Webpack 中路徑的配置
這篇文章主要給大家介紹了關(guān)于Webpack2中路徑配置的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-06-06
SyntaxHighlighter代碼加色使用方法
原名：SyntaxHighlighter，是一款用于web頁面的代碼著色工具，可以用來著色多種語言，可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語言。最早見于Yahoo的YUI，當(dāng)時還屬于自由軟件，最近打開官方網(wǎng)站發(fā)現(xiàn)已被goolge收編。
2008-09-09
微信小程序仿抖音視頻之整屏上下切換功能的實現(xiàn)代碼
這篇文章主要介紹了微信小程序仿抖音視頻之整屏上下切換功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-05-05
js控制文本框禁止輸入特殊字符詳解
本文主要介紹了js控制文本框禁止輸入特殊字符的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04
JS+HTML5實現(xiàn)上傳圖片預(yù)覽效果完整實例【測試可用】
這篇文章主要介紹了JS+HTML5實現(xiàn)上傳圖片預(yù)覽效果,結(jié)合完整實例形式分析了javascript上傳圖片本地預(yù)覽的具體操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2017-04-04