以编程方式更新可观察对象时,Knockoutjs 未更新 UI
Knockoutjs not updating UI when programmatically updating an observable
为什么当我以编程方式更新 observable 并打开模式时,下拉菜单没有更新?这是所有的代码
https://jsfiddle.net/krob636/jes9bvLw/119/
如果我先尝试更改元素的值,则更改可观察对象会更新下拉列表。单击 Launch modal button 然后单击 Observable 按钮。所选 id 发生变化,但下拉列表不变。现在点击 Element 按钮,然后再次点击 Observable 按钮。下拉列表确实发生了变化。
Javascript
this.selectedSimulators = ko.observableArray().extend({notify: 'always'});
this.simulators = ko.observableArray([
new Simulator(1, 1, 1, "CH-53E", "APT", "APT 2F190-2"),
new Simulator(2, 1, 1, "CH-53E", "EAET", "EAET 2H164-2"),
new Simulator(3, 1, 1, "CH-53E", "WST", "WST 2F174-2")
]);
this.openModal = function() {
$('#exampleModal').modal('show');
this.selectedSimulators(1);
// UI does not update without calling this
//$("#ddSims").val(1);
}
HTML
<select class="form-control" id="ddSims" multiple="multiple" data-bind="options: simulators,
optionsText: 'typeAndSerialNumber',
optionsValue: 'id',
selectedOptions: selectedSimulators,
multiselect: {includeSelectAllOption: true}">
</select>
<button type="button" class="btn btn-primary" data-bind="event: {click: openModal}">
Launch modal
</button>
您正在混合使用 observable 和 observableArray。 selectedSimulators 是一个数组,但随后您将其设置为值 1,而不是将值 1 推送到数组。请尝试 self.selectedSimulators.push(1);
。
为什么当我以编程方式更新 observable 并打开模式时,下拉菜单没有更新?这是所有的代码 https://jsfiddle.net/krob636/jes9bvLw/119/
如果我先尝试更改元素的值,则更改可观察对象会更新下拉列表。单击 Launch modal button 然后单击 Observable 按钮。所选 id 发生变化,但下拉列表不变。现在点击 Element 按钮,然后再次点击 Observable 按钮。下拉列表确实发生了变化。
Javascript
this.selectedSimulators = ko.observableArray().extend({notify: 'always'});
this.simulators = ko.observableArray([
new Simulator(1, 1, 1, "CH-53E", "APT", "APT 2F190-2"),
new Simulator(2, 1, 1, "CH-53E", "EAET", "EAET 2H164-2"),
new Simulator(3, 1, 1, "CH-53E", "WST", "WST 2F174-2")
]);
this.openModal = function() {
$('#exampleModal').modal('show');
this.selectedSimulators(1);
// UI does not update without calling this
//$("#ddSims").val(1);
}
HTML
<select class="form-control" id="ddSims" multiple="multiple" data-bind="options: simulators,
optionsText: 'typeAndSerialNumber',
optionsValue: 'id',
selectedOptions: selectedSimulators,
multiselect: {includeSelectAllOption: true}">
</select>
<button type="button" class="btn btn-primary" data-bind="event: {click: openModal}">
Launch modal
</button>
您正在混合使用 observable 和 observableArray。 selectedSimulators 是一个数组,但随后您将其设置为值 1,而不是将值 1 推送到数组。请尝试 self.selectedSimulators.push(1);
。