快捷導(dǎo)航

KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定

更新時間：2016年10月10日 11:20:11 作者：SmallProgram

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)文章

JavaScript截屏功能的實現(xiàn)代碼
我覺得使用JS截圖的想法是非?；闹嚨?，首先JS沒有權(quán)限調(diào)用操作系統(tǒng)的截圖功能，其次，瀏覽器（BOM）也沒有提供相關(guān)的截圖接口，經(jīng)過一番折騰，有點思路了，下面通過實例代碼給大家簡單介紹下js 截屏功能的實現(xiàn)代碼，一起看看吧
2017-07-07
HTML元素拖拽功能實現(xiàn)的完整實例
這篇文章主要給大家介紹了關(guān)于HTML元素拖拽功能實現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
JS彈性運動實現(xiàn)方法分析
這篇文章主要介紹了JS彈性運動實現(xiàn)方法,結(jié)合實例形式分析了JS實現(xiàn)彈性運動的原理、相關(guān)技術(shù)細(xì)節(jié)與實現(xiàn)技巧,需要的朋友可以參考下
2016-12-12
Js日期選擇自動填充到輸入框(界面漂亮兼容火狐)
本文為大家寫了個很漂亮、兼容火狐的Js日期選擇，自動填充到輸入框，代碼如下，有需要的朋友可以參考下
2013-08-08
JS實現(xiàn)的自動打字效果示例
這篇文章主要介紹了JS實現(xiàn)的自動打字效果,涉及javascript遞歸算法、字符串操作及事件函數(shù)相關(guān)使用技巧,需要的朋友可以參考下
2017-03-03
Bootstrap CSS組件之導(dǎo)航(nav)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之導(dǎo)航(nav)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
uniapp實現(xiàn)下拉刷新的幾種方式小結(jié)
原生的uniapp的下拉刷新是一個普通的加載框,樣式真的很單一,下面這篇文章主要總結(jié)介紹了uniapp實現(xiàn)下拉刷新的幾種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
javascript手機驗證、郵箱驗證、密碼驗證的正則表達(dá)式簡單封裝實例
正則表達(dá)式在日常的數(shù)據(jù)驗證中是必不可少的驗證方式,這篇文章主要給大家介紹了關(guān)于javascript手機驗證、郵箱驗證、密碼驗證的正則表達(dá)式簡單封裝的相關(guān)資料,需要的朋友可以參考下
2022-09-09
js對字符的驗證方法匯總
這篇文章主要介紹了js對字符的驗證方法,實例匯總了漢字驗證、手機驗證、郵箱驗證、身份證號驗證等各種常用技巧,需要的朋友可以參考下
2015-02-02
通過babel操作AST精準(zhǔn)插入配置代碼全流程
這篇文章主要為大家介紹了通過babel操作AST精準(zhǔn)插入配置代碼的全流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2022-02-02