javascript - Knockout 选项选择在隐藏/显示后重新初始化

Question

当使用 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 将获取该值。当您取消选中可见并隐藏选择框，然后再次使其可见时，它将失去他的选择值并重新初始化为列表中的第一项。

有人可以解释这种行为吗？

Answer 1

由于您将选择绑定(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);
});