使用 KnockoutJS 从 API 加载字段后,将字段添加到 observableArray

Add field to observableArray after it has been loaded from API using KnockoutJS

我有一个名为 documents 的 observablearray,我从 API 调用的结果中加载了 JSON。然后我使用 document 加载当前选择的文档。代码如下:

self.documents = ko.observableArray();

self.document = {
    DocID: ko.observable(),
    DocName: ko.observable(),
    isDocumentEdit: ko.observable(false)  
}

function populateDocumentLocations() {
    ajaxHelper(url + '/api/Documents/' + self.businessList.busID().busID, 'GET').done(function (data) {
        self.documents(data);
    });
}

function ajaxHelper(uri, method, data) {
    return $.ajax({
        type: method,
        url: uri,
        dataType: 'json',
        contentType: 'application/json',
        data: data ? JSON.stringify(data) : null
    }).fail(function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown);
    });
}

APIreturns的两个属性是DocID和DocName。这一切都很好。我在文档中添加了第三个字段(如上所述),"isDocumentEdit" 所以我知道用户是否单击了 "edit" 按钮(相应地更改 GUI)。

但是,isDocumentEdit 的值仍然是 "undefined" 而不是 false。

我也试过遍历 "documents" 并为每个元素添加 "isDocumentEdit = false" 但这没有用。

是否可以在加载后向可观察对象添加另一个参数?或者有没有办法在它进行 API 调用时加载它(这是我尝试循环并添加但没有成功的地方)?

当数据从 ajax 调用返回时,需要将其映射到包含可观察对象的模型。

首先声明文档视图模型:

function Document (document) {
    var self = this;

    self.DocID = ko.observable(document.DocID);
    self.DocName = ko.observable(document.DocName);
    self.isDocumentEdit = ko.observable(false);
}

然后您可以使用 jQuery $.map 函数将 json 响应映射到您的文档:

function populateDocumentLocations() {
    ajaxHelper(url + '/api/Documents/' + self.businessList.busID().busID, 'GET').done(function (data) {
        var mappedDocuments = $.map(data, function(document) { return new Document(document) });
        self.documents(mappedDocuments);
    });
}

这也在Knockout教程中,这是一个很好的参考:http://learn.knockoutjs.com/#/?tutorial=loadingsaving