0

我有这个视图模型：

视图模型

var sitesTableModel = [
{
   nameCol: "nameCol-1",
   pagesCol: "editorCol-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),
};

然后我以这种方式调用网络服务：

阿贾克斯调用

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>


    <table id="tableSites">  
        <tbody data-bind="foreach: documentsTable" >
        <tr>
            <td data-bind="text: lastCol">Simon Werner Hansen</td>
            <td data-bind="text: editedCol">swh002</td>
        </tr>
        </tbody>
    </table>

如果我评论两者之一，其他工作正常，但如果它们在同一页面上，则表只是空的，没有错误或什么都没有。

与模型的上下文有关吗？

4

2 回答 2

1

我注意到你正在做的映射代码

viewModel.sitesTable = ko.observableArray(itemRow);

我想知道你是否想要

viewModel.sitesTable(itemRow);

一旦在初始化期间创建了淘汰赛 observable 或 observableArray，您需要注意不要用另一个新的 observableArray 覆盖它们，尤其是在您调用 ko.applyBindings() 之后。

我认为这最好用一个例子来说明......

//Initialize my view model
var myOriginalObservable = ko.observableArray([initialValue]);

var viewModel = {
    modelProperty : myOriginalObservable
}

//Call applyBindings
ko.applyBindings(viewModel);

//In some other function, I reset viewModel.modelPropert = ko.observableArray()
var myNewObservable = ko.observableArray([newValue]);

viewModel.modelProperty = myNewObservable;

在调用 applyBindings 之后，其他一些操作将我的 viewModel 的属性设置为一个新的 observable，而不是仅仅更改现有 observable 中的值。我在初始化中创建的 observable (myOriginalObservable) 仍然存在，我的 UI 仍然绑定到它，但是当我更改 viewModel.modelProperty 指向的对象 (myNewObservable) 时，我失去了对它的引用。

我认为这可能是您遇到的问题。

于 2013-06-07T16:13:14.487 回答
0

我发现了问题。

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

我不知道为什么，但由于某种原因阻止了 2 个不同的 observableArrays 在同一个模型中一起工作。所以这是一个解决方案，但它没有解释为什么会发生这种情况。

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

于 2013-06-10T08:50:17.137 回答