天天看點

Knockout.Js官網學習(options綁定)

前言

options綁定控制什麼樣的options在drop-down清單裡(例如:<select>)或者 multi-select 清單裡 (例如:<select size='6'>)顯示。此綁定不能用于<select>之外的元素。關聯的資料應是數組(或者是observable數組),<select>會周遊顯示數組裡的所有的項。

對于multi-select清單,設定或者擷取選擇的多項需要使用selectedOptions綁定。對于single-select清單,你也可以使用value綁定讀取或者設定元素的selected項。

Drop-down list

Knockout.Js官網學習(options綁定)

該參數是一個數組(或者observable數組)。對每個item,KO都會将它作為一個<option> 添加到<select>裡,之前的options都将被删除。

如果參數是一個string數組,那你不需要再聲明任何其它參數。<select>元素會将每個string顯示為一個option。不過,如果你讓使用者選擇的是一個JavaScript對象數組(不僅僅是string),那就需要設定optionsText和optionsValue這兩個參數了。

如果參數是監控屬性observable的,那元素的options項将根據參數值的變化而更新,如果不是,那元素的value值将隻設定一次并且以後不在更新。

如果對上面的select UI元素加上multiple="true"

Knockout.Js官網學習(options綁定)

這可以說是Multi-select list

Drop-down list展示的任意JavaScript對象,不僅僅是字元串

Knockout.Js官網學習(options綁定)

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的),那麼上述的第一個項就會被選中

Drop-down list展示的任意JavaScript對象,顯示text是function的傳回值

Knockout.Js官網學習(options綁定)

optionsText

上面《Drop-down list展示的任意JavaScript對象,不僅僅是字元串》中展示的綁定JavaScript對象到option上 – 不僅僅是字元串。這時候你需要設定這個對象的那個屬性作為drop-down清單或multi-select清單的text來顯示。設定額外的參數optionsText将對象的屬性名countryName作為顯示的文本。

如果不想僅僅顯示對象的屬性值作為每個item項的text值,那你可以設定optionsText 為JavaScript 函數,然後再函數裡通過自己的邏輯傳回相應的值(該函數參數為item項本身)。

optionsValue

和optionsText類似, 你也可以通過額外參數optionsValue來聲明對象的那個屬性值作為該<option>的value值。

經典場景:如在更新options的時候想保留原來的已經選擇的項。例如,當你重複多次調用Ajax擷取car清單的時候,你要確定已經選擇的某個car一直都是被選擇上,那你就需要設定optionsValue為“carId”或者其它的unique标示符,否則的話KO找不知道之前選擇的car是新options裡的哪一項

selectedOptions

對于multi-select清單,你可以用selectedOptions讀取和設定多個選擇項。技術上看它是一個單獨的綁定,有自己的文檔,請參考: selectedOptions綁定。

繼續閱讀