javascript - SELECT with 2 optgroups build with KnockOut 将值重置为空

Question

我有这个 HTML

<select data-bind="value: $data.id">
    <optgroup label="Regions" data-bind="foreach: countries.regions.names">
        <option data-bind="html: $data.name, value: $data.value"></option>
    </optgroup>

    <optgroup label="Countries" data-bind="foreach: shipping.allCountries">
        <option data-bind="html: $data.name, value: $data.code"></option>
    </optgroup>

</select>

使用此 javascript，它在 2 个 optgroups 中的任何一个中预填充了一个 ID。 ID 始终存在!

this.id = ko.observable(data.id);

但是select被KnockOut构建后，this.id()的值为空，会返回undefined。当我订阅该字段时，它会通知我它正在更新，但什么都没有。

我当前的(脏)修复:

setTimeout(function(){
    self.id(data.id);
}, 500);

这可行，但当然不推荐。

另外，在select中选择另一个元素后，返回原来的值，也是可以的。

我该如何解决这个问题？

注意:选择了正确的元素。

Answer 1

失败的原因是 value的 <select>元素在使用 foreach 绑定(bind)其内容之前绑定(bind)那value如果无法选择模型值本身，则绑定(bind)会将模型值重置为元素中当前选择的任何值。

问题示例:http://jsfiddle.net/mbest/8r6KY/

有两种解决方案。

1。防止模型值被重置

一种解决方案是防止 value使用 Knockout 3.1(目前处于 Beta 阶段)中可用的新绑定(bind)选项重置模型值进行绑定(bind)，valueAllowUnset .

<select data-bind="value: $data.id, valueAllowUnset: true">

示例:http://jsfiddle.net/mbest/D6dR2/

2。在值之前绑定(bind)内容

第二种解决方案是获取 <option> value 之前的元素被绑定(bind)。这可以通过在早期绑定(bind)内容的元素上进行自定义绑定(bind)来完成。

<select data-bind="bindInner, value: $data.id">

绑定(bind):

ko.bindingHandlers.bindInner = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.applyBindingsToDescendants(bindingContext, element);
        return { controlsDescendantBindings: true };
    }
};

示例:http://jsfiddle.net/mbest/ETFsa/

推荐

第一个选项使用内置解决方案，但确实有一个缺点，即 UI 选择使用 setTimeout 进行(在 value 绑定(bind)中)。因此，当 View 初始化时，您可以在选择中看到明显的变化。我认为第二种选择更好，当然，您可以同时使用这两种选择来双重解决问题。