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

重要特性:

優(yōu)雅的依賴(lài)追蹤 - 不管任何時(shí)候你的數(shù)據(jù)模型更新，都會(huì)自動(dòng)更新相應(yīng)的內(nèi)容。

聲明式綁定 - 淺顯易懂的方式將你的用戶(hù)界面指定部分關(guān)聯(lián)到你的數(shù)據(jù)模型上。

輕易可擴(kuò)展 - 幾行代碼就可以實(shí)現(xiàn)自定義行為作為新的聲明式綁定。

額外的好處：

純JavaScript類(lèi)庫(kù) – 兼容任何服務(wù)器端和客戶(hù)端技術(shù)

可添加到Web程序最上部 – 不需要大的架構(gòu)改變

簡(jiǎn)潔的 - Gzip之前大約25kb

兼容任何主流瀏覽器 - (IE 6+、Firefox 2+、Chrome、Safari、其它)

采用行為驅(qū)動(dòng)開(kāi)發(fā) - 意味著在新的瀏覽器和平臺(tái)上可以很容易通過(guò)驗(yàn)證。

目的

value綁定主要用于DOM元素給視圖模型賦值用的。通常用于<input><select><textarea>等元素。

value綁定與text綁定的區(qū)別在于，value綁定中當(dāng)用戶(hù)編輯表單控件相關(guān)值的時(shí)候，值會(huì)自動(dòng)更新視圖模型的相關(guān)屬性值，當(dāng)視圖模型的相關(guān)屬性值被更新后，表單中相關(guān)的value綁定也會(huì)隨之變化。

value綁定就像DOM和ViewModel的一個(gè)雙向通道。而text綁定只是ViewModel到DOM的單向通道。

例如：

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
<script type="text/javascript">
var viewModel = {
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc"), // Prepopulate
};
</script>

一些細(xì)節(jié)

主要技術(shù)細(xì)節(jié)：

KO將會(huì)使用初始值設(shè)置value綁定的元素。當(dāng)有新的值的時(shí)候，初始值將被覆蓋
如果value綁定的是監(jiān)控屬性，那么之后的屬性值更新就會(huì)被體現(xiàn)在DOM的value綁定上，如果不是監(jiān)控屬性，則只有第一次運(yùn)行會(huì)更新DOM上的value綁定的值，之后就不會(huì)再變了。

如果你的value綁定不是數(shù)值型或字符型數(shù)據(jù)(例如一個(gè)對(duì)象或數(shù)組)，那顯示的文本內(nèi)容將等同于yourParameter.toString()。最好還是綁定值型或字符型數(shù)據(jù)。

當(dāng)用戶(hù)編輯表單控件修改基于value綁定的元素值并移出焦點(diǎn)后，KO就會(huì)自動(dòng)更新對(duì)應(yīng)的視圖模型的屬性值，你也可以通過(guò)使用valueUpdate事件來(lái)控制。

其他技術(shù)細(xì)節(jié)：

valueUpdate，KO定義了一系列的change事件，最常用包括如下事件：

"input"-<input>或<textarea>元素的變化更新您的視圖模型時(shí)的值。

"keyup" - 當(dāng)用戶(hù)釋放某個(gè)鍵更新您的視圖模型

"keypress"-當(dāng)用戶(hù)輸入一個(gè)值更新您的視圖模型。不像keyup，這個(gè)會(huì)反復(fù)更新

"afterkeydown"-當(dāng)用戶(hù)開(kāi)始輸入一個(gè)字符盡快更新您的視圖模型。這通過(guò)捕獲瀏覽器的keydown事件，并異步處理該事件。這

個(gè)事件在一些移動(dòng)客戶(hù)端可能不會(huì)起什么作用。

valueAllowUnset，適用于<select>的value綁定，其他元素不起作用，具體請(qǐng)參考之后的備注2.

備注1：實(shí)時(shí)更新

如果你想要實(shí)時(shí)更新<input>或者<textarea>到你的視圖模型，可以使用textInput綁定。具體的textInput細(xì)節(jié)將在之后的章節(jié)提到。

備注2：下拉列表<select>的綁定

KO在下拉列表綁定中，需要使用value綁定和options綁定(options綁定將在以后的章節(jié)中提到)。

使用valueAllowUnset與<select>元素

Select a country:

源碼：

<p>
Select a country:
<select data-bind="options: countries,
optionsCaption: 'Choose one...',
value: selectedCountry,
valueAllowUnset: true"></select>
</p>
<script type="text/javascript">
var viewModel = {
countries: ['Japan', 'Bolivia', 'New Zealand'],
selectedCountry: ko.observable('Latvia')
};
</script>

有很多時(shí)候，我們希望下拉列表中包含一個(gè)空白的或者沒(méi)有包含在數(shù)據(jù)集合中的元素，比如choose one…，那么就可以使用valueAllowUnset:true來(lái)帶到目的。如上述例子一樣。

selectedCountry將保留Latvia，并將下拉列表中空白匹配給它。

備注3：綁定監(jiān)控屬性和非監(jiān)控屬性

如果你使用value綁定的是一個(gè)監(jiān)控屬性，KO是能夠建立一個(gè)雙向綁定。

但是如果value綁定是一個(gè)非監(jiān)控屬性，則KO會(huì)進(jìn)行以下處理：

如果引用一個(gè)簡(jiǎn)單的屬性，也就是說(shuō)，它只是在你的視圖模型一個(gè)普通的屬性，表單元素編輯時(shí)KO將設(shè)置表單元素的初始狀態(tài)屬性值。

例如：

First value:
hello
First value:hello
Second value:
hello, again
Second value: hello, again
Third value:
true

源碼：

<p>First value: <input data-bind="value: firstValue"></p>
<p>First value:<span data-bind="text:firstValue"></span></p>
<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondValue"></p>
<p>Second value: <span data-bind="text: secondValue"></span></p>
<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondValue.length &gt; 8"></p>
<script type="text/javascript">
var viewModel = {
firstValue: ko.observable("hello"), // Observable
secondValue: "hello, again" // Not observable
};
ko.applybindings(viewModel,document.getElementById("eq2"));
</script>

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

最新評(píng)論