HTML选项-当可观察对象为null时显示默认值

knockout.js html option - show default value when observable is null

本文关键字：null 显示 默认值 对象 观察 选项 HTML      更新时间：2023-09-26

下面是我在ko.js中绑定下拉菜单的代码

HTML: 

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

myList正在从数据库中填充，并成功显示所有值。

我也可以成功保存一个值。

当不选择任何值时，默认值为None。所以，当没有值(null)为这个字段在DB -我想显示默认选项值为"None"，这是不发生的。

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。下面的代码不工作:

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

设置可观察对象的值为undefined，以触发默认的optionsCaption。

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/else来简化你的代码:

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

您需要将valueAllowUnset添加到数据绑定中，因为null不在绑定数组中:

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

看到:

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

相关文章：