Javascript 选择绑定：清除选项observable数组将值observable属性设置为undefined。如何避免呢？

我有这样一个淘汰的viewmodel（非常简化的示例）：

我有一个选择框，它绑定到以下属性：

<select data-bind="value: selectedItemValue, options: items, optionsValue: 'value', optionsText: 'text'"></select>

当我从选择框中选择一个值，然后清除项目数组后，我的

selectedItemValue

属性变为未定义。然后，当我重新填充数组时，它有一个带有我以前选择的值的项目，我的

selectedItemValue

将被更正

我想这是因为它的源对象被删除了，我猜字符串值是通过引用传递给绑定的

selectedItemValue

observable的

ko.observableArray.fn.refill = function (items) {
    if (!(items instanceof Array)) return this.peek().length;
    var underlyingArray = this.peek();
    this.valueWillMutate();    
    underlyingArray.splice(0, underlyingArray.length);
    ko.utils.arrayPushAll(underlyingArray, items);
    this.valueHasMutated();
    return this.peek().length;
};

如何避免这种情况？我希望在清除和重新填充我的项目数组期间，保持可观察到的选定字符串值和选定值不变。这是因为我完全通过ajax不时刷新阵列，这种行为引入了一些难以修复的bug

更新：

这种行为似乎与选择绑定机制特别相关，它不会恢复到我最初选择的值，而是可选择项中的第一项，在这种情况下，这更有意义

---

A来演示我的问题。

基本上，当选项被清除时，将值重置为未定义是一种良好且正确的行为。对我来说，这是一个问题，因为我实际上不想清除选项，而是重新填充它们，如果在新项目数组中也显示了原始选择，则保留原始选择

与此同时，我找到了一个解决方案，编写了自己的“重新填充”方法。如果将来有人需要这样的功能，我将在这里分享

关键部分是使用

valueWillMutate

和

valuehassmutated

ko方法，这两种方法可用于指示将对可观察的对象执行批处理更改

ko.observableArray.fn.refill = function (items) {
    if (!(items instanceof Array)) return this.peek().length;
    var underlyingArray = this.peek();
    this.valueWillMutate();    
    underlyingArray.splice(0, underlyingArray.length);
    ko.utils.arrayPushAll(underlyingArray, items);
    this.valueHasMutated();
    return this.peek().length;
};

---

您应该使用

computed

observable，只有在未定义新值时，它才会更改

selectedItemValue

：

视图模型：

    self.selectedItemValue = ko.observable(null);
    self.selectedItemValueComp = ko.computed({
        read: function() {
            return self.selectedItemValue;
        },
        write: function(newValue) {
            if (newValue) {
                self.selectedItemValue(newValue);
            }
        }
    });

Html:

清除所选项目
重新加注选定项目


selectedItemValueComp:


selectedItemValue:

---

如何准确地清除

项

数组？@haim770，我已经用jsfiddle更新了这个问题。谢谢，这也是一个很好的解决方法，但我找到了一个更优雅的解决方案，同时回答了我的问题。

<select data-bind="value: selectedItemValueComp, options: items, optionsValue: 'value', optionsText: 'text'"></select>
<button type="button" data-bind="click: clearItems">Clear select items</button>
<button type="button" data-bind="click: refillItems">Refill select items</button>

<br/>
selectedItemValueComp: <strong data-bind="text: selectedItemValueComp()"></strong>
<br/>
selectedItemValue: <strong data-bind="text: selectedItemValue"></strong>