Question

我使用Knockout JS和JQuery/Bootstrap based; Data Table API将数据绑定到表格。在排序或加载时，表会偶尔无响应。日志中没有错误。

它还显示0个数据中的0个，如下面的屏幕截图所示：

我已经看到类似的错误/问题，但无法为他们找到解决方案，例如。 This post:

代码：

    function viewModel(){

        var self = this;
        self.Data = ko.observableArray([]);

        $.getJSON('https://restcountries.eu/rest/v1/all', function(data){
            self.Data(data);
        });
    }

    ko.applyBindings(viewModel());

    $(document).ready(function() {
        $('#example').dataTable();
    });

HTML：

    <div class="table-responsive">
        <table id="example" cellspacing="0"  
class="table table-striped table-bordered table-condensed">
            <thead>
            <tr>
                <th scope="col">Country</th>
                <th scope="col">Capital</th>
                <th scope="col">Population</th>
                <th scope="col">Region</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th scope="col">Country</th>
                <th scope="col">Capital</th>
                <th scope="col">Population</th>
                <th scope="col">Region</th>
            </tr>
            </tfoot>
            <tbody data-bind="foreach: Data">
            <tr>
                <td data-bind="text: name"></td>
                <td data-bind="text: capital"></td>
                <td data-bind="text: population"></td>
                <td data-bind="text: region"></td>
            </tr>
            </tbody>
    </table>
        </div>

以下是使用REST API的完整working example (JSFiddle)，以便准确复制确切的问题：

Answer 1

我认为您的示例问题可能在于您从API调用中获取数据时如何处理数据。

我已经汇总了一个快速示例，它实现了我认为您正在尝试实现的目标以及快速为我排序和搜索工作。

当我从API获取JSON数据时，我使用Knockout arrayMap实用程序函数创建一个“Country”对象数组，这些对象具有我已将JSON数据映射到的可观察属性。我把桌子绑定到了我的observableArray of Country对象。

在这种情况下，以与您工作正常相同的方式初始化数据表。

完整的工作解决方案在这里：http://plnkr.co/edit/eroIox6zqBFOVnf86Mdk?p=preview

<强>的script.js

var ViewModel = function(jsonData) {
  var countries = ko.utils.arrayMap(jsonData, function(item) {
    return new Country(item)
  });
  this.Countries = ko.observableArray(countries);
};

var Country = function(jsonItem) {
  this.Name = ko.observable(jsonItem.name);
  this.Capital = ko.observable(jsonItem.capital);
  this.Population = ko.observable(jsonItem.population);
  this.Region = ko.observable(jsonItem.region);
};

window.onload = function() {
  $.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
    ko.applyBindings(new ViewModel(data));
    $("#example").dataTable();
  });
}

的的index.html

<table id="example" cellspacing="0" class="table table-striped table-bordered table-condensed"> <thead> <tr> <th scope="col">Country</th> <th scope="col">Capital</th> <th scope="col">Population</th> <th scope="col">Region</th> </tr> </thead> <tfoot> <tr> <th scope="col">Country</th> <th scope="col">Capital</th> <th scope="col">Population</th> <th scope="col">Region</th> </tr> </tfoot> <tbody data-bind="foreach: Countries"> <tr> <td data-bind="text: Name"></td> <td data-bind="text: Capital"></td> <td data-bind="text: Population"></td> <td data-bind="text: Region"></td> </tr> </tbody> </table>

Answer 2

在Knockout中渲染表格相当慢，如果你的表格基于computed，我可以看到你如何在重绘时间方面遇到一些问题。但这不会发生在这里。

除了加载数据并将其绑定到表行之外，viewmodel中不会进行任何数据操作。所有数据操作都由dataTable插件完成，您可以使用单个jQuery调用进行初始化。正确地说，这应该在绑定处理程序中完成。您还需要知道插件在排序，过滤器或其他任何操作时发生了什么，因为您可能需要将这些更改调解回绑定处理程序中的observableArray。

底线：您需要dataTable的绑定处理程序。可能已经写了一个;我没有用Google搜索。试一试。

当使用Knockout绑定对数据进行排序或加载时，数据表会偶尔挂起（表中没有可用数据）

2 个答案: