我遇到的问题与AJAX的动态选择选项有关。
用例是改变select #1中的值应该通过ajax填充select #2中的选项。不常见的是,select #2的值也是异步的,但是使用不同的ajax。
jsfifle显示以下代码(简化-只有一个ajax样的超时)。我们有两个选择,一个是静态选项,另一个是动态选项。都有值绑定
<select id="select_1" data-bind="value: select_1_value">
<option selected>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select_2" data-bind="options:selectOptions, value: select_2_value"></select>
Select 2 value is <span data-bind="text: select_2_value">
Js部分如下所示:
var vm = function AppViewModel() {
this.selectOptions = ko.observableArray(['a','b','c']);
this.select_1_value = ko.observable(1);
this.select_2_value = ko.observable('a');
this.computedValue = ko.computed( function () {
<!-- prevent from initial -->
if (this.select_1_value() != 1)
{
console.log('changed');
this.select_1_value();
this.selectOptions.removeAll()
var self = this
setTimeout(function(){
self.selectOptions.push(['e']);
self.selectOptions.push(['f']);
<!-- DOES WORK But i do not want it here -->
<!--self.select_2_value('f'); -->
}, 1000);
<!-- DOES NOT WORK -->
this.select_2_value('f');
}
}, this);
}
$(function() {
ko.applyBindings(new vm());
});
你可以在jsfiddle中看到的是,当select_2_value不是在异步部分设置时,它会在清除选项observableArray时被覆盖。
我认为这是一个设计缺陷。你能帮我指出来吗?谢谢!
您可以使用knockout的valueAllowUnset绑定,如果选择选项中不存在该值,该绑定将不会清除该值。
更新JSFiddle<select id="select_1" data-bind="value: select_1_value">
<option selected>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select_2" data-bind="options:selectOptions, value: select_2_value, valueAllowUnset:true"></select>
Select 2 value is <span data-bind="text: select_2_value">