用 AJAX 替换 Observable 数组答案

【问题标题】：Replacing an Observable Array with AJAX用 AJAX 替换 Observable 数组
【发布时间】：2015-09-26 06:08:17
【问题描述】：

在我们的应用程序中，我们有一系列选择过滤器，必须根据情况的上下文动态填充这些过滤器。首次加载时，默认选项通过 AJAX 插入到数组中，并按预期显示在 UI 上。 However, when the select list refreshes, the UI does not reflect the changes even though if you inspect the code the array appears to contain the new values.

我为两个过滤器编写了相同的代码，但由于某种奇怪的原因，它只适用于其中一种情况，我尝试了以下方法来解决这个问题，但无济于事：

使用任意数据手动填充数组
使用 array.valueHasMutated() 强制淘汰赛更新
使用两种不同类型的数组清除函数array.removeAll和array([])
使用 push.apply 和 push
将结果保存到变量中，然后将其分配给数组
使数组中的值可观察

在选项更改时，代码的第一个实例正常工作：

     success: function (data) {
                      self.filtersModel.values2.removeAll();

                      var serverData = $.map(data, function (value, i) {
                               return new SelectBoxOption(value.Description, value.Id);
                      });

                      serverData.forEach(function (value) {
                               self.filtersModel.values2.push(value);
                      }); 
             }

这是第二个不起作用的功能：

     success: function (data) {
                      self.filtersModel.values.removeAll();

                      var other;

                      var serverData = $.map(data, function (value, i) {
                               // If the option is "other" save it as a variable and add to array later
                               if (value.Code === "OTHR") {
                                        other = new SelectBoxOption(value.Description, value.Id);
                                        self.filtersModel.othersValue(value);
                               }
                               else if (value.Code == "EQTY") {
                                        var equity = new SelectBoxOption(value.Description, value.Id);
                                        self.filtersModel.equityValue(value);
                                        return equity;
                               }
                               else
                                        return new SelectBoxOption(value.Description, value.Id);
                      });

                      serverData.forEach(function (value) {
                               self.filtersModel.values.push(value);
                      });

                      // Add "other" option to bottom of the array
                      if (other)
                               self.filtersModel.values.push(other);
             }

任何帮助将不胜感激。

更新

填充选择列表的 HTML 如下所示：

<div class="form-group">
    <label for="value">Value</label>
    <select id="value" class="form-control" data-bind="value: selectedValue, options: values, optionsCaption: '-- ' + 'Select Value' + ' --', optionsValue: 'optionId', optionsText:  'optionName'"></select>
</div>
<div class="form-group">
    <label for="value2">Value 2</label>
    <select id="value2" class="form-control" data-bind="enable: $parent.valueIsAuthorisedAndvalueIsEquityOrOther, value: selectedValue2, options: values2, optionsCaption: '-- ' + 'Select Value 2' + ' --', optionsValue: 'optionId', optionsText:  'optionName'"></select>
</div>

以这种格式返回示例数据：

data = [
    {optionId: 1, optionName: "Value 1"}, 
    {optionId: 2, optionName: "Value 2"},
    {optionId: 3, optionName: "Value 3"}, 
    {optionId: 4, optionName: "Value 4"}
];

【问题讨论】：

标签： javascript jquery arrays knockout.js

【解决方案1】：

如果我理解您的问题，则第二个代码不起作用，因为您在每次迭代中都在更新 self.filtersModel.othersValue 和 self.filtersModel.equityValue。

我重写了你的代码，希望对你有帮助：

self.filtersModel.values.removeAll();

var normals = [];
var others = [];
var equities = [];

ko.utils.arrayForEach(data, function (d) {
   if (d.Code === 'OTHR')
      others.push(new SelectBoxOption(d.Description, d.Id);
  else if (d.Code === 'EQTY')
      equities.push(new SelectBoxOption(d.Description, d.Id);
  else 
      normals.push(new SelectBoxOption(d.Description, d.Id);
});

self.filtersModel.values(normals.concat(equities).concat(others));

【讨论】：

我试过了，它也不起作用。奇怪的是，在第一次加载时，调用self.filtersModel.values.removeAll(); 似乎会崩溃，因为我的断点是在它没有触发之后放置的。此外，调用此函数根本不会填充选择框...
要使用removeAll() 属性self.filtersModel.values 必须是observableArray()。用你的代码提供一个 JSFiddle，然后我可以帮助你

【解决方案2】：

经过深思熟虑，我发现问题根本与 ajax 函数无关，而是我在更改选择列表之前定义的错误方法调用：

self.clearFilters = function() {
    self.filtersModel = new createFiltersModel();
}

function createFiltersModel() {
    return {
        values: ko.observableArray([])
    }
};

每次选择列表更改时都会创建一个新的 filtersModel 实例，因此在进行 ajax 调用时对模型的任何更改都会丢失。呸！

【讨论】：