KnockoutJS - drop-down list應用(1)

將陣列資料繫結至drop-down list
在HTML語法中，drop-down list主要是以select標籤來實作。在KnockoutJS裡，我們可以透過設定observableArray搭配options binding，將陣列資料繄結到drop-down list裡，此陣列可以是由資料庫或其它資料來源取得的資料，如透過AJAX呼叫某支web service取得。

<select data-bind="options: currencies"></select>

function ViewModel() {
    var self = this;
    self.currencies = ko.observableArray(["USD", "GBP", "EUR", "JPY"]);
}

ko.applyBindings(new ViewModel());

在上面的程式碼中，將currencies指定給options binding，KnockoutJS就自動幫我們把選項(option標籤)列出來。



取得被選取的選項值
如果想知道是哪個選項被選取，需先設定value binding。

<select data-bind="options: currencies, value: selectedCurrency"></select>
<span data-bind="text: selectedCurrency"></span> selected!

function ViewModel() {
    var self = this;
    self.currencies = ko.observableArray(["USD", "GBP", "EUR", "JPY"]);
    self.selectedCurrency = ko.observable("USD");
}

ko.applyBindings(new ViewModel());

上述程式中加入了selectedCurrency屬性並指定給value binding，當使用者選擇了drop-down list中的任何一個選項時，selectedCurrency就會被寫入選項值。selectedCurrency的預設值為USD，也可以是currencies陣列中其它的選項。



為drop-down list加入非陣列資料中的預設選項
在上述的範例中，drop-down list預設在頁面載入時就選取USD。然而在某些情況下(如drop-down list為非必選欄位)，我們會希望drop-down list有個選項也許叫"請選擇"，而不直接預設任何一個currencies屬性裡的值。要達成這個需求，一個方法是直接在currencies中加入"請選擇"，如此KnockoutJS便會將請選擇選項加到select標籤下，如

self.currencies = ko.observableArray(["請選擇", "USD", "GBP", "EUR", "JPY"]);

然而這方式雖然可行但不是個好作法，因為請選擇這個選項與currencies屬性的命名在意義上是不同的。

在KnockoutJS中其實已經為options binding內建了一個名為optionsCaption的參數用來實現上述的需求，只要在optionsCaption內指定需要顯示的文字即可。

<select data-bind="options: currencies, value: selectedCurrency, optionsCaption: '請選擇'">
</select>
<span data-bind="text: selectedCurrency"></span> selected!

function ViewModel() {
    var self = this;
    self.currencies = ko.observableArray(["USD", "GBP", "EUR", "JPY"]);
    self.selectedCurrency = ko.observable();
}

ko.applyBindings(new ViewModel());

在上面的程式碼中，selectedCurrency預設無設定任何資料，drop-down list預設的選項便是請選擇。



延伸閱讀
KnockoutJS - drop-down list應用(2)