选项更改时选择淘汰第一个选项

我正在使用<select>框通过淘汰赛绑定到一个计算值包装ID和一个observableArray的选项。但是，将某个项目添加到选项数组时，选择始终会更改为第一个选项。我不能为我的生活理解为什么。选项更改时选择淘汰第一个选项

请参阅下面的示例。点击按钮添加一个选项并且注意选择改变。如果我将选择的绑定更改为value: optionId, options: options, optionsValue: 'id', optionsText: 'name'，这似乎不会发生，但我想知道它为什么不能正常工作。

的jsfiddle：http://jsfiddle.net/5m8yud69/2/

HTML：

</select> 

<button data-bind="click: click"> 
Click me 
</button>

JavaScript的： VAR选项= ko.observableArray（）;

options.push({ id: 1, name: "one" }); 
options.push({ id: 2, name: "two" }); 
options.push({ id: 3, name: "three" }); 

var optionId = ko.observable(3); 
var option = ko.computed({ 
    read: function() { 
    var id = optionId(); 
    return ko.utils.arrayFirst(options(), function (option) { return option.id === id; }); 
    }, 
    write: function (value) { 
    optionId(value == null ? null : value.id); 
    } 
}); 

var model = { 
    optionId: optionId, 
    option: option, 
    options: options, 
    click: function() { 
    options.push({ id: 4, name: "four" }); 
    model.options(options); 
    } 
}; 

ko.applyBindings(model);

来源

2016-02-12 enoshixi

你的问题是此行的点击功能：

model.options(options);

前一行已经更新了观察到的阵列，但随后该行尝试将观察到的阵列设置为自身。（由于model.options是options的别名，因此该行相当于options(options)，这更明显不正确）。

你最终会得到一个可观察的数组。（Observable数组实际上并不阻止你将不是数组的东西放入其中）这不是你想要的，而是造成各种奇怪的错误。

只需删除该行，您的代码就可以正常工作。 Working version。

来源

2016-02-12 18:44:40 Retsam

选项更改时选择淘汰第一个选项

回答

相关问题