DataTables + KnockoutJS：“表中没有数据”和排序问题

Question

正如我在以下问题中提到的：How do I pass an ID from View to the ViewModel as a parameter for GET function? 我正在开发一个 MVC 应用程序，使用 MVC4、knockoutJS、Web API、Bootstrap、MSSQL Server 2012 等。我正在使用 DataTables jQuery 库来创建表并使用 knockoutJS 将它们与数据库中的数据绑定。出现以下两个问题：当我使用 data-bind="foreach: regionListModel.regions" 绑定表时，它会填充我的表，但它会在表的末尾添加一行“表中没有数据”，在表格页脚显示“显示 0 到 0 个结果，共 0 个结果”，没有分页，当我尝试过滤结果时，它会完全清空表格。当我使用标题对列进行排序时，也会发生同样的情况。

我将再次发布代码sn-ps。

视图模型：

    var regionsModel = {
    regionId: ko.observable(),
    companyId: ko.observable(),
    name: ko.observable(),
    companyName: ko.observable()    
};

var regionsListModel = {
    regions: ko.observable()
};

function getRegions() {
    get(apiUrl + "Regions/GetRegions", {}, function (data) {
        regionsListModel.regions(data);
    });
}

function getRegion() {
    get(apiUrl + "Regions/GetRegion", { aiId: regionsModel.regionId() }, function (data) {
        regionsModel.regionId(data.RegionID);
        regionsModel.companyName(data.CompanyName);
        regionsModel.companyId(data.CompanyID);
        regionsModel.name(data.Name);
    });
}

function viewRegion() {
    $("#ViewRegionModal").modal('show');
    //regionsModel.regionId($('#ViewRegion').val());
    getRegion();
    return false;
}

视图代码：

<table class="table table-striped table-bordered responsive" id="dtable">
                            <thead>
                                <tr>
                                    <th style="width: 20px;">ID</th>
                                    <th>Region Name</th>
                                    <th>Company Name</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: regionsListModel.regions">
                                <tr id="ViewRegion" data-toggle="modal" data-bind="click: viewRegion, value: RegionID">
                                    <td data-bind="text: RegionID"></td>
                                    <td data-bind="text: Name"></td>
                                    <td data-bind="text: CompanyName"></td>
                                </tr>
                            </tbody>
                        </table>

问题图片：http://i.imgur.com/CNRnRlW.png

任何帮助将不胜感激！

编辑：添加调用 getRegions 的代码（位于 Regions.js 文件中，ViewModel 放在 RegionsData.js 中，均在页面加载时加载）。

$(function () {
    ko.applyBindings(regionsModel);

    getRegions();
    getCompanies();

    $("#NewRegionButton").click(function () {
        $("#NewRegionModal").modal('show');
        return false;
    });

    $("#ViewRegion").click(function () {
        $("#ViewRegionModal").modal('show');
        return false;
    });

    $("#NewRegionModalClose").click(function () {
        clearFields();
        $("#NewRegionModal").modal('hide');
        return false;
    });

    $("#NewRegionSave").click(function () {
        newRegion();
        $("#NewRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionClose").click(function () {
        $("#ViewRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionEdit").click(function () {
        $("#ViewRegionModal").modal('hide');
        $("#EditRegionModal").modal('show');
        return false;
    });

    $("#RegionUpdateSave").click(function () {
        updateRegion();
        $("#EditRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionEditClose").click(function () {
        clearFields();
        $("#EditRegionModal").modal('hide');
        return false;
    });
})

Answer 1

如果有人像我一样遇到同样的问题，这就是解决方案，而且完全无需淘汰：

    function updateView() {
    $("#tableProblems").dataTable({
        "bDestroy": true,
        "sDom": "<'row-fluid dt-header'<'span6'f><'span6'>r>t<'row-fluid dt-footer'<'span6'i><'span6'p>>",
        "aaData": problemsModel.problems(),
        "aoColumns": [
            { "mDataProp": "ProblemID" },
            { "mDataProp": "CategoryName" },
            { "mDataProp": "DateOpenFormatted" },
            { "mDataProp": "DateClosedFormatted" },
            { "mDataProp": "ObjectName" },
            { "mDataProp": "Nickname" }
        ]
    });
}

我只是在页面初始化时使用了这部分代码，当我执行 get* 函数时，我只是调用 updateView() 函数，在 View 端，我将 tbody 完全留空，其余的由 DataTables 完成。

（这是我正在开发的另一个组件的例子，不是Regions，但原理是一样的）