视图模型

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),
};

然后我用这种方式调用web服务：

Ajax Call

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>

如果我评论其中两个中的一个工作正常，但是如果它们在同一页面上，则表格只是空的，没有错误或没有。

与模型的上下文有关吗？

Answer 1

我注意到你正在做的地图代码

viewModel.sitesTable = ko.observableArray(itemRow);

我想知道你是否想要

viewModel.sitesTable(itemRow);

在初始化期间创建了knockout 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）时，我已经丢失了对它的引用。

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

Answer 2

我发现了问题。

我在ajax调用的 .always 函数中应用了绑定ko.applyBinding，但因为我因为两个不同的原因而调用了两次服务，所以绑定被应用 TWICE 。

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

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

两个observableArray在同一页面中不能与嵌套的viewModel一起使用

视图模型

Ajax Call

映射

数据绑定

2 个答案: