javascript - 通过 AJAX 绑定(bind)选项时，是否可以将选择元素的默认值传递给 Knockout？

Question

我需要获取 <select /> 的当前值和可用选项通过两个不同的 AJAX 调用(出于几个原因我无法对它们进行排队/链接)。

我不知道这是否重要，但读取当前值的调用在每次调用读取可用选项之前完成。

使用 Knockout 2.0.0 和 Knockout Mapping 2.0.3 我将选择绑定(bind)为 data-bind="options: values, value: valueComputed" ，但我发现 Knockout 正在删除/忽略第一个 AJAX 调用设置的值，直到获取可用选项的调用完成后才能设置当前值。

这是正确的吗？是否可以告诉 Knockout“这是当前值，当可用选项可用时选择它”？

经过几次测试后，我想出了一个问题:我没有将一个普通的可观察对象绑定(bind)到选择的值，而是使用了一个计算的可观察对象，我在其中截取该值并且如果新值未定义则不更改底层可观察对象.

我是不是在做坏事？

jsFiddle 示例:http://jsfiddle.net/KeNUU/

我正在使用的 JavaScript 代码:

var viewModel = function () {
    var self = this;

    // The underlying observable where
    // the selected value is stored.
    self.value = ko.observable();

    // The observable bound to
    // the value of the drop down.
    self.values = ko.mapping.fromJS([]);

    // Use a computed observable to intercept the undefined
    // value placed by KnockOut when binding the drop down.
    self.valueComputed = ko.computed({
        "read": function () {
            return ko.utils.unwrapObservable(self.value);
        },
        "write": function (value) {
            // Update the underlying observable only when
            // there is a value, if it's undefined ignore it.
            if (value) {
                self.value(value);
            }
        }
    });

    // Simulate the AJAX request which fetches the actual value,
    // this request must complete before the second one.
    setTimeout(function () {
        self.valueComputed("b");
    }, 1000 * 1);

    // Simulate the AJAX request which fetches the available values,
    // this reqest must complete after the first one.
    setTimeout(function () {
        ko.mapping.fromJS(["a", "b", "c", "d"], {}, self.values);
    }, 1000 * 2);
};

$(document).ready(function () {
    ko.applyBindings(new viewModel());
});

Answer 1

我不认为您正在做的事情会给您带来问题，但您正在规避 KO 的逻辑以确保绑定(bind)到值(value)的是您选项中的有效选择。此外，如果您使用 optionsCaption 来提供空白选择，那么您将无法清除您的值。在您的情况下，这可能无关紧要。

我认为更简单的选择是将初始值缓存在不可观察的对象中，然后在列表返回时使用它来填充 value。如果列表在前，则没有初始值，可以正常工作。

类似于:

setTimeout(function () {
    self.initialValue = "b";
    self.value("b");
}, 1000 * 1);

// Simulate the AJAX request which fetches the available values,
// this reqest must complete after the first one.
setTimeout(function () {
    ko.mapping.fromJS(["a", "b", "c", "d"], {}, self.values);
    if (self.initialValue) {
         self.value(self.initialValue);
         self.initialValue = null;
    }    
}, 1000 * 2);

http://jsfiddle.net/rniemeyer/gB3E5/

现在，您可以预先处理此问题，而无需计算可观察拦截每次下拉列表更改的(次要)开销。