使用 ko observableArray 使用查找数据进行异步 AJAX 调用？答案

【问题标题】：Async AJAX call with lookup data using ko observableArray?使用 ko observableArray 使用查找数据进行异步 AJAX 调用？
【发布时间】：2014-04-16 20:27:38
【问题描述】：

我有一个 observableArray 绑定到以下选项：

<select data-bind="options: lookupData.options, optionsText: 'DisplayName', optionsValue: 'Id', value: optionId" />

当我第一次应用绑定时，options() 可观察数组为空 - 发送异步 AJAX 调用以检索这些选项。

大多数情况下，这非常有效。但是，如果我非常快速地显示视图，在 AJAX 调用返回之前，下拉菜单会显示一个默认选项，但这些选项变得可用。选择的选项虽然没有更新。

换句话说 - 如果我将“蓝色”作为当前选择的选项，但在 AJAX 调用完成之前显示选择标记，则在填充 observableArray 选项后不会选择“蓝色”。

我是否缺少一些语法来完成这项工作？

代码：

   // getLookupData()
   var lookupData = {};
   lookupData.colors = ko.observableArray();
   $.ajax({
            type: "POST",
            url: getAllergyRelationshipListUrl.url,
            async: true,
            data: new Object(),
            dataType: "json",
            contentType: "application/json"
        }).done(function(data, textStatus, jqXhr) {
            lookupData.colors(data.Data);
        });

   return lookupData;

   // colorVm
   if (vm.colorLookupData == null) {       
      vm.colorLookupData = getLookupData();
   }

   ko.applyBindings(vm);

【问题讨论】：

你能发布你的视图模型吗？
@AnthonyChu - 刚刚更新
这是您的代码的编辑版本吗？因为它看起来并不完整。是否可以创建视图的jsFiddle。

标签： ajax knockout.js

【解决方案1】：

这是淘汰赛选择的一个已知问题。在您的 ajax 完成之前，options 中不存在 value，options 绑定强制您的 value 成为 options 之一。

从 3.1 版开始，通过引入 valueAllowUnset 淘汰赛解决了这个问题。

将您的绑定更新为：

<select data-bind="valueAllowUnset: true, options: lookupData.options, optionsText: 'DisplayName', optionsValue: 'Id', value: optionId" />

你可以在这里阅读http://knockoutjs.com/documentation/value-binding.html#using-valueallowunset-with-select-elements

【讨论】：