淘汰赛：选择元素选项绑定 + 值绑定 + optionsCaption 绑定 + 后期 ajax 响应 = 怪异

Question

考虑select 元素上的以下 ko 绑定：

<select data-bind="value: valueObservable, options: optionsObservableArray, 
    optionsCaption: '[None] - this is an optional field'">

...给定如下视图模型：

function MyViewModel()
{
    var self = this;
    self.valueObservable = ko.observable();
    self.optionsObservableArray = ko.observableArray();

    // ajax call to load options
    ko.computed(function() {
        $.ajax(...)
        .success(function(optionsResponse) {
            self.optionsObservableArray(optionsResponse)
        });
    });

    // ajax call to load data value
    ko.computed(function() {
        $.ajax(...)
        .success(function(valueResponse) {
            self.valueObservable(valueResponse)
        });
    });
}

奇怪的是，第二个（数据）ajax 调用在第一个（选项）ajax 调用之前返回。由于select 元素具有optionsCaption 绑定，因此我认为正在发生以下情况：

1. 数据 ajax 调用完成，将 valueObservable 设置为某个值（如 6、abc 或其他一些非虚假值）。
2. 因为select元素中只有1个option（由于optionsCaption），并且因为valueObservable绑定到它（通过value绑定），这导致@987654332 @ 改为undefined。
3. 最后，optionsObservableArray 完成并将新的option 元素添加到select，但此时为时已晚：valueObservable 现在包装了undefined 值而不是实际数据值从第一个 ajax 调用返回。

问题：解决此问题的最佳方法是什么？这是我能想到的：

1. 使用async: false 运行第一个ajax 调用。这可能会减慢页面呈现速度。
2. 创建一个单独的 observable 用于绑定到选择值（例如value: selectedValueObservable）。然后订阅optionsObservableArray 并使用订阅执行self.selectedValueObservable(self.valueObservable()) 之类的操作。这似乎是一种创可贴。
3. 通过从服务器发送选项数据（使用 MVC 视图模型），在执行任何 javascript 之前将选择和选项呈现到页面。这使得处理observableArray 的选项变得更加困难。

更新

为了简化示例代码，我从这个问题中省略了另一个问题。实际上，此视图模型用于创建可编辑的数据项列表。所以实际上有超过 1 个下拉列表被渲染到页面。 data ajax 调用确实返回了一个数组，它的成功函数确实设置了一个复杂项目的observableArray。由于下拉列表选项在每个内联表单中都重复使用，因此它被放置在 $parent 视图模型上并且只加载一次。在单个 ajax 调用中传递选择选项也很困难，因为数据项是通过 WebAPI 检索的（返回 IEnumerable，没有空间发送额外的下拉选项）。

Answer 1

如果可能的话，我建议您进行一次 ajax 调用。使您的控制器返回具有对象数组和选定值的复杂对象：

// ajax call to load options and data value
ko.computed(function() {
    $.ajax(...)
    .success(function(response) {
        self.optionsObservableArray(response.options);
        self.valueObservable(response.value);
    });
});

如果无法合并两个 ajax 调用，您可以将第二个 ajax 的调用放到第一个 ajax 的成功回调中：

// ajax call to load options
ko.computed(function() {
    $.ajax(...)
    .success(function(optionsResponse) {
        self.optionsObservableArray(optionsResponse)

        // ajax call to load data value
        $.ajax(...)
        .success(function(valueResponse) {
             self.valueObservable(valueResponse)
        });
    });
});

Answer 2

有什么理由不先进行 ajax 调用并在完成时 applyBinding 吗？

$.when(getOptions(), getData()).done(bind) 


function getOptions() { 
    return $.ajax(...).success(vm.optionsObservableArray)
}

function getData() {
    return $.ajax(...).success(vm.valueObservable)
}

function bind() {
    ko.applyBindings(vm, document.getElementById('elem')) 
}