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" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { availableCountries: ko.observableArray(['France', 'Germany', 'Spain']), chosenCountries: ko.observableArray(['Germany']) }; ko.applyBindings(viewModel); viewModel.chosenCountries.push('France'); </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的。
uniqueName綁定
uniqueName綁定確保所綁定的元素有一個非空的name屬性。如果該元素沒有name屬性,那綁定會給它設置一個unique的字符串值作為name屬性。你不會經常用到它,只有在某些特殊的場景下才用到。
1.在使用KO的時候,一些技術可能依賴於某些元素的name屬性,盡快他們沒有什么意義。例如,jQuery Validation驗證當前只驗證有name屬性的元素。為配合Knockout UI使用,有些時候需要使用uniqueName綁定避免讓jQuery Validation驗證出錯。
2.IE 6下,如果radio button沒有name屬性是不允許被checked了。大部分時候都沒問題,因為大部分時候radio button元素都會有name屬性的作為一組互相的group。不過,如果你沒聲明,KO內部會在這些元素上使用uniqueName那么以確保他們可以被checked。
例如:
<input data-bind="value: someModelProperty, uniqueName: true"/>
就像上面的例子一樣,傳入true(或者可以轉成true的值)以啟用uniqueName綁定。