Knockout.Js官網學習(selectedOptions綁定、uniqueName 綁定)


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綁定。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM