Javascript 用AJAX替换可观察数组

在我们的应用程序中，我们有一系列选择过滤器，这些过滤器必须根据情况的上下文动态填充。在第一次加载时，默认选项通过AJAX插入到数组中，并按预期显示在UI上。但是，当“选择”列表刷新时，UI不会反映更改，即使您检查代码时，数组似乎包含新值

我为两个过滤器编写了相同的代码，但出于某种奇怪的原因，它只在其中一种情况下有效，我尝试了以下方法来解决此问题，但没有效果：

• 使用任意数据手动填充数组
• 强制使用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>

---

如果我理解您的问题，第二个代码不起作用，因为您在每次迭代中都在更新

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));

---

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

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

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

---

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

我试过这个，但也不起作用。奇怪的是，在第一次加载时，调用self.filtersModel.values.removeAll（）似乎会崩溃作为未触发的断点放置在它之后。此外，调用此函数根本不会填充选择框…要使用

removeAll（）

属性

self.filtersModel.values

必须是

observearray（）

。为您的代码提供一个JSFIDLE，然后我可以帮助您

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

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