当使用 select with knockouts 'option' 绑定(bind)时,我发现在隐藏 select 元素并再次显示它时没有预料到的行为。
当我在列表中选择一个选项时,observable 被赋予了正确的值。但是,当我隐藏选择的 html 项目然后再次使其可见时,之前选择的值将会丢失。
对于我的测试,我使用以下 html 模板:
Visible: <input type="checkbox" data-bind="checked: visible" />
<!-- ko 'if': visible -->
<select data-bind="options: options, optionsText: 'name', value: selectedItem"></select>
<!-- /ko -->
结合
var ViewModel = function() {
this.visible = ko.observable(true);
this.options = ko.observableArray([
{name: 'A', value: 'A00'},
{name: 'B', value: 'A01'},
{name: 'C', value: 'A02'},
]);
this.selectedItem = ko.computed({
read: function () {
console.log("reading value");
},
write: function (newSelection) {
console.log("setting value:" + newSelection.value);
}
});
};
ko.applyBindings(new ViewModel());
您可以在我在 jsfiddle 上的示例中对此进行测试: http://jsfiddle.net/5wZQ2/169/
当您选择一个值(例如列表中的 B)时,observable 将获取该值。当您取消选中可见并隐藏选择框,然后再次使其可见时,它将失去他的选择值并重新初始化为列表中的第一项。
有人可以解释这种行为吗?
最佳答案
由于您将选择绑定(bind)到缺少支持字段的计算,因此 UI 无法保存其状态。通常你会有一个可观察的存储当前选择的值,并且计算将仅用于对支持字段和 UI 之间的数据执行一些转换。
如果您添加一个可观察对象,并将其值传递给计算对象,则选择将保存其状态并在删除后重新绑定(bind)到最后一个值并通过“if”绑定(bind)重新添加,因为它将被重新使用可观察对象的保存值进行初始化。
this._selectedItem = ko.observable();
this.selectedItem = ko.computed({
read: function () {
console.log("reading value");
return this._selectedItem();
},
write: function (newSelection) {
console.log("setting value:" + newSelection.value);
this._selectedItem(newSelection);
}
}, this);
在您的示例中,实际上根本没有理由使用计算。您可以改为将选择绑定(bind)到一个普通的可观察对象。
this.selectedItem = ko.observable();
然后,如果您仍然希望将更改记录到控制台,您可以在可观察对象上使用订阅方法。
this.selectedItem.subscribe(function(newSelection){
console.log("setting value:" + newValue);
});
关于javascript - Knockout 选项选择在隐藏/显示后重新初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42102871/