Как обновить сетку нокаута после вызова API AJAX

Я работаю в среде MVC 5/Knockout. Первоначально My View загружается из ViewModel, поставляемого стандартным контроллером MVC 5. У меня есть сетка нокаута как часть этого представления. Сетка правильно заполнена на основе содержимого ViewModel.Как обновить сетку нокаута после вызова API AJAX

При нажатии кнопки пользователя выполняется вызов Web API и возвращается успешно. Я хочу использовать данные, возвращенные из вызова API, для обновления массива наблюдаемого нокаута, который привязан к сетке нокаута. Я вижу, что наблюдаемый массив нокаута корректируется, но сетка нокаута никогда не обновляется. Массив нокаута, который я пишу, с результатами вызова API - это тот же массив, который записывается, когда сначала загружается Вид.

Это Teh код в верхней части .cshtml зрения:

<script> 
    $(function() { 
     var inputData = ko.mapping.toJS(@Html.Raw(HelperFunctions.ToJson(Model))); 
     var dom = document.getElementById("AWBSNode"); 
     var obj = new AreasModel(inputData); 
     ko.applyBindings(obj, dom); 
    }); 
</script>

AWBSNode является самым верхним DIV в моем cshtml. Ниже HTML для моей сетки

<div id="koGridPanel" class="panel panel-default top-buffer"> 
    <div class="panel-heading">AWBS - Areas</div> 
    <div class="koGrid" data-bind="koGrid: gridOptions"></div> 
</div>

Ниже соответствующий JS моей вида Модели/сетки конфигурации/связывания

var AreasModel = function(data) { 
    var self = this; 
    var apiCall = new APICaller(); 
    . 
    . 
    . 
    self.AllAWBSAreas = ko.observableArray(
     ko.utils.arrayMap(data.Areas, function(x) { 
      return new NewAWBSAreaModel(x); 
     }) 
    ); 
    . 
    . 
    . 
    this.gridOptions = { 
     footerRowHeight: 35, 
     beforeSelectionChange: function (rowItem) { 
      self.selectAreaToEdit(rowItem); 
     }, 
     disableTextSelection: false, 
     keepLastSelected: false, 
     multiSelect: false, 
     displaySelectionCheckbox: false, 
     data: self.AllAWBSAreas, 
     columnDefs: [ 
      { field: 'Name', displayName: 'Name' }, 
      { field: 'Description', displayName: 'Description' } 
     ] 
    }; 
    . 
    . 
    .

Ниже являюсь API вызовов я делаю (я использую функцию обертки, но что часть работает отлично, как я пришел, чтобы путь успеха и данные там

apiCall.CallAPI(
    url, 
    dom, 
    true, 
    null, 
    function (successData) { 
     self.AllAWBSAreas(ko.utils.arrayMap(successData.Items, function (x) { 
      return new NewAWBSAreaModel(x); 
     }); 
    );

Я также попробовал альтернативный подход

apiCall.CallAPI(
    url, 
    dom, 
    true, 
    null, 
    function (successData) { 
     self.AllAWBSAreas(successData.Items); 
     . 
     . 
     . 
     .

Я попытался позвонить valueHasMutated() на объект AllAWBSAreas. Нет проблем с вызовом API и его возвращаемыми данными, поскольку этот шаблон отлично работает во всех других аспектах проекта. Симптом, который я вижу, заключается в том, что сетка в пользовательском интерфейсе «затронута», но не обновлена. Чистый синий баннер вверху пуст, но данные остаются неизменными.

источник

2015-11-19 AmoAmasAmatitAgain

Я взял более простую версию вашей ситуации и создал эту скрипту https://jsfiddle.net/Lhwt7emc/2/ ... твой же подход, похоже, работает там. можете ли вы воспроизвести его на скрипаче? –

Привет Сэм, я посмотрел на ваше предложение. Я изменил мою настройку, чтобы попытаться обновить мою сетку нокаута вручную сгенерированными данными, в отличие от данных, генерируемых API Call. Сетка обновлена с помощью ручных данных. Я попробовал еще один тест. В той же точке я объявлял простую таблицу Bootstrap, связанную с отдельным наблюдаемым массивом нокаута. Я сделал свой оригинальный вызов API и обновил наблюдаемый массив, управляющий таблицей Bootstrap с данными API Call, и это тоже сработало. Таким образом, это только сетка нокаута, которая не будет обновляться в контексте вызова API. – AmoAmasAmatitAgain

Я также должен сказать, что я работаю с Chrome, а в инструментах разработчика ошибок не возникает, когда я пытаюсь обновить нокаут, наблюдаемый за рулем сетки нокаута. – AmoAmasAmatitAgain

Ответ оказался проблемой с помощью счетчика ladda. Сетка нокаута не будет обновляться, если прядильщик был прикреплен к сетке нокаута. Я переместил прядильщик на соседний фрагмент пользовательского интерфейса, и все работало. Спасибо тем, кто нашел время, чтобы посмотреть/помочь с этой проблемой.

источник

2015-11-23 15:29:30 AmoAmasAmatitAgain

Как обновить сетку нокаута после вызова API AJAX

ответ

Смежные вопросы