knockout.js HTMLオプションを表示するデフォルト値に観察下に

Question

nullであるko.jsに

HTMLをドロップダウンをバインドするために私のコードですすべての値とともに表示されます。

値も正常に保存できます。

問題は私は任意の値を選択していけない

、デフォルト値はNoneです。 DBにこのフィールドの値がない場合（null）、デフォルトのオプション値を"None"として表示したいとします。 I

var _selectedPart = ko.observable(); 
var itemSelected = // get value from DB; 

if (itemSelected) { 
    _selectedPart(parnerSelected);// works fine // 
} else { 
    // select Default option value as "None" 
} 

は、HTML内のNULLをチェックするを試してみました。コードの下、doesntの仕事：デフォルトoptionsCaptionをトリガするためにundefinedへの観察可能な値を設定し

<select data-bind="options: myList, value: selectedPart == null ? 'None' : selectedPart "></select> 

Answer 1

。

function Sample() { 
 
    var self = this; 
 
    
 
    this.myList = ['A', 'B', 'C']; 
 
    this._selectedPart = ko.observable(); 
 
    
 
    this.selectFromDB = function() { 
 
     // random item to simulate "get from DB" 
 
     var randomIndex = Math.floor(Math.random() * this.myList.length); 
 
     var value = self.myList[randomIndex]; 
 
     self._selectedPart(value); 
 
    }; 
 
    this.reset = function() { 
 
     self._selectedPart(undefined); 
 
    }; 
 
} 
 

 
ko.applyBindings(new Sample());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<button data-bind="click: selectFromDB">Select Item</button> 
 
<button data-bind="click: reset">Reset</button> 
 
<br> 
 
<select data-bind="options: myList, value: _selectedPart, optionsCaption: 'None'"></select>

あなたは、if /他のこのようなを取り払うことで、あなたのコードを簡素化することができます。

var itemSelected = // get value from DB; 
_selectedPart(itemSelected || undefined); 

Answer 2

nullではないので、あなたのデータバインドにvalueAllowUnsetを追加する必要がありますバインドされた配列：

<select data-bind="options: myList, 
        value: _selectedPart, 
        optionsCaption: 'None', 
        valueAllowUnset: true"></select> 

はこちらをご覧ください：

http://knockoutjs.com/documentation/value-binding.html#using-valueallowunset-with-select-elements