来自 ObservableArray 的数据在我的表中显示两次

Question

这是我的视图模型：

视图模型

var sitesTableModel = [
{
   nameCol: "nameCol-1",
   pagesCol: "pagesCol-1",
},
{
    nameCol: "nameCol-2",
    pagesCol: "pagesCol-2",
}];

var pagesTableModel = [
{
   lastCol: "lastCol-1",
   editedCol: "editedCol-1",
},
{
    lastCol: "lastCol-2",
    editedCol: "editedCol-2",
}];


var viewModel = {
    sitesTable: ko.observableArray(sitesTableModel),
    pagesTable: ko.observableArray(pagesTableModel),
};

那我这样调用一个webservice：

AJAX 调用

ajaxService = (function () {
    var ajaxGetJson = function (method, request, callback, service) {
        $.ajax({
            url: "http://localhost:2880/Whatever.svc/Method",
            type: "GET",
            data: request,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (result, statusMsg, status)
            {
                callback(result, statusMsg, status, request);
            },
            error: ServiceFailed 
        }).always(function () {
            ko.applyBindings(viewModel); 
            });
    }
    return {
        ajaxGetJson: ajaxGetJson,
    };
})();

并以这种方式映射结果：

映射

function ModelTableSitesMapper(result, statusMsg, status, request) {

    var itemRow = [];

    //sitesTableModel
    result.forEach(function (entry) {
        itemRow.push({
            nameCol: entry.Title,
            pagesCol: entry.Pages,
        })
    });

    viewModel.sitesTable = ko.observableArray(itemRow);

};

另一个数组也是如此。

现在这是我的数据绑定：

数据绑定

    <table id="tableDocs">  
        <tbody data-bind="foreach: documentsTable" >
        <tr>
            <td data-bind="text: nameCol">Simon Werner Hansen</td>
            <td data-bind="text: pagesCol">swh002</td>
        </tr>
        </tbody>
    </table>

当我得到结果时，表格中的所有内容都会显示两次。 我检查了模型，observableArray中没有双重数据。 我知道 Iøm 将对象声明为 observableArray 两次，这可能是问题所在，但我找不到任何其他方法来更新数组：

viewModel.sitesTable = ko.observableArray(itemRow);

如果我按照应有的方式这样做，它就是行不通的：

viewModel.sitesTable(itemRow);

也许有人能理解其中的原因？

Answer 1

我发现了问题。

我在 ajax 调用的 .always 函数上应用了绑定 ko.applyBinding，但是因为我出于 2 个不同的原因调用了该服务两次，所以应用了绑定 TWICE强>。 这导致了数据的重复。

我刚刚在创建模型后将绑定移到了函数之外。

Answer 2

如果你尝试会发生什么：

var viewModel = {
    sitesTable: ko.observableArray([]),
    pagesTable: ko.observableArray([]),
};

没有提及您预先填充数组的变量是什么。

然后将每个项目直接添加到您的 observable 中：

function ModelTableSitesMapper(result, statusMsg, status, request) {
    //sitesTableModel
    result.forEach(function (entry) {
        viewModel.sitesTable.push({
            nameCol: entry.Title,
            pagesCol: entry.Pages,
        })
    });
};