Замена наблюдаемого массива на AJAX

Question

В нашем приложении у нас есть серия фильтров выбора, которые необходимо динамически заполнять на основе контекста ситуации. При первой загрузке параметры по умолчанию вставляются в массив через AJAX и отображаются в пользовательском интерфейсе, как и ожидалось. Однако, когда список выбора обновляется, пользовательский интерфейс не отражает изменения, хотя, если вы проверяете код, массив содержит новые значения.

Я написал один и тот же код для двух фильтров, но по какой-то странной причине он работает только в одной из ситуаций, я попытался следующие, чтобы решить это без толку:

• Наполнение массив вручную произвольные данные
• Принудительная нокаут, чтобы обновить с array.valueHasMutated()
• Использование двух различных типов массивов очистки функций array.removeAll и массив ([])
• Используя push.apply и нажмите
• Сохранение результата в переменной, а затем назначая, что массив
• Создание значений внутри массива наблюдаемых

Это первый экземпляр кода работает, как ожидается, когда параметры меняются:

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

Любая помощь будет принята с благодарностью.

UPDATE

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"} 
]; 

Answer 1

После долгих раздумий, я обнаружил, что проблема не связана с функцией AJAX, а скорее метод багги вызов я определил перед изменяя список выбора:

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

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

Это создало новый экземпляр filtersModel каждый раз, когда список выбора изменился, так что любые изменения в модель были потеряны, когда вызов Ajax был сделан. Doh!

Answer 2

Если я правильно понял ваш вопрос, то второй код не работает, потому что вы обновляете 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));