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

重要特性:

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

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

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

額外的好處：

純JavaScript類庫 – 兼容任何服務器端和客戶端技術(shù)

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

簡潔的 - Gzip之前大約25kb

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

采用行為驅(qū)動開發(fā) - 意味著在新的瀏覽器和平臺上可以很容易通過驗證。

目的

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

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

value綁定就像DOM和ViewModel的一個雙向通道。而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>

一些細節(jié)

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

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

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

當用戶編輯表單控件修改基于value綁定的元素值并移出焦點后，KO就會自動更新對應的視圖模型的屬性值，你也可以通過使用valueUpdate事件來控制。

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

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

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

"keyup" - 當用戶釋放某個鍵更新您的視圖模型

"keypress"-當用戶輸入一個值更新您的視圖模型。不像keyup，這個會反復更新

"afterkeydown"-當用戶開始輸入一個字符盡快更新您的視圖模型。這通過捕獲瀏覽器的keydown事件，并異步處理該事件。這

個事件在一些移動客戶端可能不會起什么作用。

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

備注1：實時更新

如果你想要實時更新<input>或者<textarea>到你的視圖模型，可以使用textInput綁定。具體的textInput細節(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ù)據(jù)集合中的元素，比如choose one…，那么就可以使用valueAllowUnset:true來帶到目的。如上述例子一樣。

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

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

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

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

如果引用一個簡單的屬性，也就是說，它只是在你的視圖模型一個普通的屬性，表單元素編輯時KO將設置表單元素的初始狀態(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綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論