Knockout應用開發指南 第三章:綁定語法(3)

12   value 綁定

目的javascript

value綁定是關聯DOM元素的值到view model的屬性上。主要是用在表單控件<input>,<select>和<textarea>上。html

當用戶編輯表單控件的時候, view model對應的屬性值會自動更新。一樣,當你更新view model屬性的時候,相對應的元素值在頁面上也會自動更新。java

注:若是你在checkbox或者radio button上使用checked綁定來讀取或者寫入元素的 checked狀態,而不是value 值的綁定。express

 

例子數組

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

 

參數瀏覽器

    主參數app

    KO設置此參數爲元素的value值。以前的值將被覆蓋。異步

    若是參數是監控屬性observable的,那元素的value值將根據參數值的變化而更新,若是不是,那元素的value值將只設置一次而且之後不在更新。函數

    若是你提供的參數不是一個數字或者字符串(而是對象或者數組)的話,那顯示的value值就是yourParameter.toString() 的內容(一般沒用,因此最好都設置爲數字或者字符串)。this

    無論何時,只要你更新了元素的值,那 KO都會將view model對應的屬性值自動更新。默認狀況下當用戶離開焦點(例如onchange事件)的時候,KO才更新這個值,可是你能夠經過第2個參數valueUpdate來特別指定改變值的時機。

 

    其它參數

        valueUpdate

        若是你使用valueUpdate參數,那就是意味着KO將使用自定義的事件而不是默認的離開焦點事件。下面是一些最經常使用的選項:

            「change」(默認值) - 當失去焦點的時候更新view model的值,或者是<select> 元素被選擇的時候。

            「keyup」 – 當用戶敲完一個字符之後當即更新view model。

            「keypress」 – 當用戶正在敲一個字符但沒有釋放鍵盤的時候就當即更新view model。不像 keyup,這個更新和keydown是同樣的。

            「afterkeydown」 – 當用戶開始輸入字符的時候就更新view model。主要是捕獲瀏覽器的keydown事件或異步handle事件。

        上述這些選項,若是你想讓你的view model進行實時更新,使用「afterkeydown」是最好的選擇。

 

例子:

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
<p>You have typed: <span data-bind="text: someValue"></span></p> <!-- updates in real-time -->

<script type="text/javascript">
var viewModel = {
someValue: ko.observable("edit me")
};
</script>

 

注1:綁定下拉菜單drop-down list(例如SELECT)

Knockout對下拉菜單drop-down list綁定有一個特殊的支持,那就是在讀取和寫入綁定的時候,這個值能夠是任意JavaScript對象,而沒必要非得是字符串。在你讓你用戶選擇一組model對象的時候很是有用。具體例子,參考options綁定。

相似,若是你想建立一個multi-select list,參考selectedOptions綁定。

 

注2:更新observable和non-observable屬性值

若是你用value綁定將你的表單元素和你的observable屬性關聯起來,KO設置的2-way的雙向綁定,任何一方改變都會更新另一方的值。

可是,若是你的元素綁定的是一個non-observable屬性(例如是一個原始的字符串或者JavaScript表達式) ,KO會這樣執行:

  • 若是你綁定的non-observable屬性是簡單對象,例如一個常見的屬性值,KO會設置這個值爲form表單元素的初始值,若是你改變form表單元素的值,KO會將值從新寫回到view mode的這個屬性。但當這個屬性本身改變的時候,元素卻不會再變化了(由於不是observable的),因此它僅僅是1-way綁定。
  • 若是你綁定的non-observable屬性是複雜對象,例如複雜的JavaScript 表達式或者子屬性,KO也會設置這個值爲form表單元素的初始值,可是改變form表單元素的值的時候,KO不會再寫會view model屬性,這種狀況叫one-time-only value setter,不是真正的綁定。

 

例子:

<p>First value: <input data-bind="value: firstValue"/></p>          <!-- two-way binding -->
<p>Second value: <input data-bind="value: secondValue"/></p> <!-- one-way binding -->
<p>Third value: <input data-bind="value: secondValue.length"/></p> <!-- no binding -->

<script type="text/javascript">
var viewModel = {
firstValue: ko.observable("hello"), // Observable
secondValue: "hello, again"// Not observable
};
ko.applyBindings(viewModel);
</script>

 

依賴性

除KO核心類庫外,無依賴。

 

13   checked 綁定

目的

checked綁定是關聯到checkable的form表單控件到view model上 - 例如checkbox(<input type='checkbox'>)或者radio button(<input type='radio'>) 。當用戶check關聯的form表單控件的時候,view model對應的值也會自動更新,相反,若是view model的值改變了,那控件元素的check/uncheck狀態也會跟着改變。

注:對text box,drop-down list和全部non-checkable的form表單控件,用value綁定來讀取和寫入是該元素的值,而不是checked綁定。

例子

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam"/></p> 

<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true) // Initially checked
};

// ... then later ...
viewModel.wantsSpam(false); // The checkbox becomes unchecked
</script>

 

Checkbox關聯到數組

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam"/></p>
<div data-bind="visible: wantsSpam">
Preferred flavors of spam:
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors"/> Cherry</div>
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors"/> Almond</div>
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors"/> Monosodium Glutamate</div>
</div>


<script type="text/javascript">

var viewModel = {
wantsSpam: ko.observable(true),
spamFlavors: ko.observableArray(["cherry", "almond"]) // Initially checks the Cherry and Almond checkboxes
};

// ... then later ...
viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
</script>

 

添加radio button

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam"/></p>

<div data-bind="visible: wantsSpam">
Preferred flavor of spam:
<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor"/> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor"/> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor"/> Monosodium Glutamate</div>
</div>


<script type="text/javascript">

var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
};

// ... then later ...
viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>



參數

    主參數

    KO會設置元素的checked狀態匹配到你的參數上,以前的值將被覆蓋。對參數的解析取決於你元素的類型:

        對於checkbox,當參數爲true的時候,KO會設置元素的狀態爲checked,反正設置爲unchecked。若是你傳的參數不是布爾值,那KO將會解析成布爾值。也就是說非0值和非null對象,非空字符串將被解析成true,其它值都被解析成false。

        當用戶check或者uncheck這個checkbox的時候,KO會將view model的屬性值相應地設置爲true或者false。

        一個特殊狀況是參數是一個數組,若是元素的值存在於數組,KO就會將元素設置爲checked,若是數組裏不存在,就設置爲unchecked。若是用戶對checkbox進行check或uncheck,KO就會將元素的值添加數組或者從數組裏刪除。

        對於radio buttons,KO只有當參數值等於radio button value屬性值的時候才設置元素爲checked狀態。因此參數應是字符串。在上面的例子裏只有當view model 的spamFlavor 屬性等於「almond」的時候,該radio button纔會設置爲checked。

        當用戶將一個radio button選擇上的時候 is selected,KO會將該元素的value屬性值更新到view model屬性裏。上面的例子,當點擊value= 「cherry」的選項上, viewModel.spamFlavor的值將被設置爲「cherry」。

        固然,最有用的是設置一組radio button元素對應到一個單個的view model 屬性。確保一次只能選擇一個radio button須要將他們的name屬性名都設置成同樣的值(例如上個例子的flavorGroup值)。這樣的話,一次就只能選擇一個了。

    若是參數是監控屬性observable的,那元素的checked狀態將根據參數值的變化而更新,若是不是,那元素的value值將只設置一次而且之後不在更新。

    其它參數

    無

 

依賴性

除KO核心類庫外,無依賴。

 

14   options 綁定

目的

options綁定控制什麼樣的options在drop-down列表裏(例如:<select>)或者 multi-select 列表裏 (例如:<select size='6'>)顯示。此綁定不能用於<select>以外的元素。關聯的數據應是數組(或者是observable數組),<select>會遍歷顯示數組裏的全部的項。

 

注:對於multi-select列表,設置或者獲取選擇的多項須要使用selectedOptions綁定。對於single-select列表,你也可使用value綁定讀取或者設置元素的selected項。

 

例1:Drop-down list

<p>Destination country: <select data-bind="options: availableCountries"></select></p>


<script type="text/javascript">
var viewModel = {
availableCountries: ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options
};

// ... then later ...
viewModel.availableCountries.push('China'); // Adds another option
</script>

 

例2:Multi-select list

<p>Choose some countries you'd like to visit: <select data-bind="options: availableCountries" size="5" multiple="true"></select></p>

<script type="text/javascript">
var viewModel = {
availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])
};
</script>

 

例3:Drop-down list展現的任意JavaScript對象,不只僅是字符串

<p>
Your country:
<select data-bind="options: availableCountries,
              optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>
</p>

<div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
You have chosen a country with population
<span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>

<script type="text/javascript">
// Constructor for an object with two properties
var country =function (name, population) {
this.countryName = name;
this.countryPopulation = population;
};

var viewModel = {
availableCountries: ko.observableArray([
new country("UK", 65000000),
new country("USA", 320000000),
new country("Sweden", 29000000)
]),
selectedCountry: ko.observable() // Nothing selected by default
};
</script>

 

例4:Drop-down list展現的任意JavaScript對象,顯示text是function的返回值

<!-- Same as example 3, except the <select> box expressed as follows: -->

<select data-bind="options: availableCountries,
optionsText: function(item) {
return item.countryName + ' (pop: ' + item.countryPopulation + ')'
},
value: selectedCountry,
optionsCaption: 'Choose...'"></select>

 

注意例3和例4在optionsText值定義上的不一樣。

 

參數

    主參數

    該參數是一個數組(或者observable數組)。對每一個item,KO都會將它做爲一個<option> 添加到<select>裏,以前的options都將被刪除。

    若是參數是一個string數組,那你不須要再聲明任何其它參數。<select>元素會將每一個string顯示爲一個option。不過,若是你讓用戶選擇的是一個JavaScript對象數組(不只僅是string),那就須要設置optionsText和optionsValue這兩個參數了。

    若是參數是監控屬性observable的,那元素的options項將根據參數值的變化而更新,若是不是,那元素的value值將只設置一次而且之後不在更新。

 

    其它參數

        optionsCaption

        有時候,默認狀況下不想選擇任何option項。可是single-select drop-down列表因爲每次都要默認選擇以項目,怎麼避免這個問題呢?經常使用的方案是加一個「請選擇的」或者「Select an item」的提示語,或者其它相似的,而後讓這個項做爲默認選項。

        咱們使用optionsCaption參數就能很容易實現,它的值是字符串型,做爲默認項顯示。例如:

        <select data-bind='options: myOptions, optionsCaption: "Select an item...", value: myChosenValue'></select>

        KO會在全部選項上加上這一個項,而且設置value值爲undefined。因此,若是myChosenValue被設置爲undefined(默認是observable的),那麼上述的第一個項就會被選中。

 

        optionsText

        上面的例3展現的綁定JavaScript對象到option上 – 不只僅是字符串。這時候你須要設置這個對象的那個屬性做爲drop-down列表或multi-select列表的text來顯示。例如,例3中使用的是設置額外的參數optionsText將對象的屬性名countryName做爲顯示的文本。

        若是不想僅僅顯示對象的屬性值做爲每一個item項的text值,那你能夠設置optionsText 爲JavaScript 函數,而後再函數裏經過本身的邏輯返回相應的值(該函數參數爲item項自己)。例4展現的就是返回item的2個屬性值合併的結果。

 

        optionsValue

        和optionsText相似, 你也能夠經過額外參數optionsValue來聲明對象的那個屬性值做爲該<option>的value值。

        經典場景:如在更新options的時候想保留原來的已經選擇的項。例如,當你重複屢次調用Ajax獲取car列表的時候,你要確保已經選擇的某個car一直都是被選擇上,那你就須要設置optionsValue爲「carId」或者其它的unique標示符,不然的話KO找不知道以前選擇的car是新options裏的哪一項。

 

        selectedOptions

        對於multi-select列表,你能夠用selectedOptions讀取和設置多個選擇項。技術上看它是一個單獨的綁定,有本身的文檔,請參考: selectedOptions綁定。

 

注:已經被選擇的項會再options改變的時候保留

當使用options綁定<select>元素的時候,若是options改變,KO將盡量第保留以前已經被選擇的項不變(除非是你事先手工刪除一個或多個已經選擇的項)。這是由於options 綁定嘗試依賴value值的綁定(single-select列表)和selectedOptions綁定(multi-select列表)。

 

依賴性

除KO核心類庫外,無依賴。

 

15   selectedOptions 綁定

目的

selectedOptions綁定用於控制multi-select列表已經被選擇的元素,用在使用options綁定的<select>元素上。

當用戶在multi-select列表選擇或反選一個項的時候,會將view model的數組進行相應的添加或者刪除。一樣,若是view model上的這個數組是observable數組的話,你添加或者刪除任何item(經過push或者splice)的時候,相應的UI界面裏的option項也會被選擇上或者反選。這種方式是2-way綁定。

注:控制single-select下拉菜單選擇項,你可使用value綁定。

 

例子

<p>
Choose some countries you'd like to visit:
<select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
</p>

<script type="text/javascript">
var viewModel = {
availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
chosenCountries: ko.observableArray(['Germany']) // Initially, only Germany is selected
};

// ... then later ...
viewModel.chosenCountries.push('France'); // Now France is selected too
</script>

 

參數

    主參數

    該參數是數組(或observable數組)。KO設置元素的已選項爲和數組裏match的項,以前的已選擇項將被覆蓋。

    若是參數是依賴監控屬性observable數組,那元素的已選擇項selected options項將根據參數值的變化(經過push,pop,或其它observable數組方法)而更新,若是不是,那元素的已選擇項selected options將只設置一次而且之後不在更新。

    無論該參數是否是observable數組,用戶在multi-select列表裏選擇或者反選的時候,KO都會探測到,而且更新數組裏的對象以達到同步的結果。這樣你就能夠獲取options已選項。

    其它參數

           無

 

注:支持讓用戶選擇任意JavaScript對象

在上面的例子裏,用戶能夠選擇數組裏的字符串值,可是選擇不限於字符串,若是你願意你能夠聲明包含任意JavaScript對象的數組,查看options綁定如何顯示JavaScript對象到列表裏。

這種場景,你能夠用selectedOptions來讀取或設置這些對象自己,而不是頁面上顯示的option表示形式,這樣作在大部分狀況下都很是清晰。view model就能夠探測到你從數組對象裏選擇的項了,而沒必要關注每一個項和頁面上展現的option項是如何map的。

 

依賴性

除KO核心類庫外,無依賴。

 

16   uniqueName 綁定

目的

uniqueName綁定確保所綁定的元素有一個非空的name屬性。若是該元素沒有name屬性,那綁定會給它設置一個unique的字符串值做爲name屬性。你不會常常用到它,只有在某些特殊的場景下才用到,例如:

  • 在使用KO的時候,一些技術可能依賴於某些元素的name屬性,儘快他們沒有什麼意義。例如,jQuery Validation驗證當前只驗證有name屬性的元素。爲配合Knockout UI使用,有些時候須要使用uniqueName綁定避免讓jQuery Validation驗證出錯。
  • IE 6下,若是radio button沒有name屬性是不容許被checked了。大部分時候都沒問題,由於大部分時候radio button元素都會有name屬性的做爲一組互相的group。不過,若是你沒聲明,KO內部會在這些元素上使用uniqueName那麼以確保他們能夠被checked。

 

例子

<input data-bind="value: someModelProperty, uniqueName: true"/>

 

參數

    主參數

    就像上面的例子同樣,傳入true(或者能夠轉成true的值)以啓用uniqueName綁定。

    其它參數

        無

 

依賴性

除KO核心類庫外,無依賴。

相關文章
相關標籤/搜索