AJAX API调用后如何刷新淘汰赛网格答案

【问题标题】：How to refresh knockout grid after AJAX API CallAJAX API调用后如何刷新淘汰赛网格
【发布时间】：2016-02-21 19:06:57
【问题描述】：

我在 MVC 5 / Knockout 环境中工作。我的视图最初是从标准 MVC 5 控制器提供的 ViewModel 加载的。作为此视图的一部分，我有一个淘汰赛网格。网格已根据 ViewModel 内容正确填充。

在用户按下按钮时，会进行 Web API 调用并成功返回。我想使用从 API 调用返回的数据来更新绑定到淘汰赛网格的淘汰赛可观察数组。我可以看到淘汰赛可观察数组已正确更新，但淘汰赛网格从未刷新。我用 API 调用的结果写入的敲除 observalbe 数组与第一次加载视图时写入的数组相同。

这是.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 是我的 cshtml 中最顶层的 div。下面是我的 Grid 的 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>

下面是我的View Model/grid config/binding的相关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); 
        .
        .
        .
        .

我尝试在 AllAWBSAreas 实体上调用 valueHasMutated()。 API 调用及其返回数据没有问题，因为这种模式在项目的所有其他方面都可以正常工作。我看到的症状是 UI 中的网格“受影响”但没有更新。顶部整洁的蓝色横幅变为空白，但数据保持不变。

【问题讨论】：

我对你的情况做了一个更简单的版本，并创建了这个小提琴jsfiddle.net/Lhwt7emc/2 ...你同样的方法似乎在那里工作。你能在提琴手上重现它吗？
嗨，Sam，我看了你的建议。我修改了我的设置以尝试使用手动生成的数据而不是 API 调用生成的数据来更新我的淘汰赛网格。使用手动数据干净地更新了网格。我尝试了另一个测试。我在同一个视图中声明了一个简单的 Bootstrap 表，该表绑定到一个单独的敲除 observable 数组。我进行了原始 API 调用，并使用 API 调用数据更新了驱动 Bootstrap 表的可观察数组，并且效果也很好。所以它只是在 API 调用的上下文中不会更新的淘汰网格。
我还应该说，我正在使用 Chrome 运行，并且在开发人员工具中，当我尝试更新驱动淘汰赛网格的淘汰赛 observable 时没有出现错误。

标签： javascript asp.net-mvc knockout.js

【解决方案1】：

答案原来是 ladda spinner 的问题。如果微调器连接到淘汰赛网格，淘汰赛网格将不会更新。我将微调器移到附近的 UI 上，一切正常。感谢那些花时间查看/帮助解决此问题的人。

【讨论】：