快捷導(dǎo)航

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

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

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

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

submit綁定目的

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