单页应用程序数据未显示在视图中

Question

我有一个 MVC 4 单页应用程序，我可以在其中看到数据视图模型的淘汰代码。我在视图中做了一个 foreach ，每次通过循环时都可以看到一个点，但数据没有显示。看起来可观察数组有 50 个元素，但每个元素都没有数据。然而，当我单步执行 getJson 调用时，我可以看到 json 格式的数据。怎么了？

这是我的 caapproval.html 查看代码-

<section>
    <h2 class="page-title" data-bind="text: title"></h2>

<br /> <br /> <br />

<ul data-bind="foreach: allCertificates">
    <li>
        <span data-bind="text: UserName"></span>
        <span data-bind="text: StatusCode"></span>
    </li>
</ul>

</section>

我的 caapproval.js 视图模型代码-

define(['services/logger'], function (logger) {
    var Certificate = function (ClientID, RequestDate, UserName,                                                 StatusDescription, StatusCode,     StatusDesc, CEOUserName ) {
    var self = this;
    self.ClientID = ko.observable(ClientID);
    self.RequestDate = ko.observable(RequestDate);
    self.UserName = ko.observable(UserName);
    self.StatusDescription = ko.observable(StatusDescription);
    self.StatusCode = ko.observable(StatusCode);
    self.StatusDesc = ko.observable(StatusDesc);
    self.CEOUserName = ko.observable(CEOUserName);
};

var allCertificates = ko.observableArray();

var vm = {
    allCertificates: allCertificates,
    activate: activate,
    title: 'Certificates'
};


return vm;


function getallCertificates() {
    $.getJSON('/api/caapproval', function (data) {

        allCertificates([]);
        var temp = allCertificates();
        data.forEach(function (p) {
            var certificate = new Certificate(p.ClientID,  p.RequestDate, p.UserName, p.StatusDescription, p.StatusCode, p.StatusDesc, p.CEOUserName);
            temp.push(certificate);
        });

        allCertificates.valueHasMutated();
        return allCertificates();
    });

}

//#region Internal Methods
function activate() {
    logger.log('CA Approval View Activated!!', null, 'CA Approval',  true);
    return getallCertificates();
}
//#endregion

});

Answer 1

首先，我相信您正在尝试将结果推送到 observableArray 而不是该数据的临时持有者。如果是这种情况，我建议将您的代码调整为以下 -

function getallCertificates() {
    $.getJSON('/api/caapproval', function (data) {

        allCertificates([]);
        data.forEach(function (p) {
            var certificate = new certificateModel(p.ClientID,  p.RequestDate, p.UserName, p.StatusDescription, p.StatusCode, p.StatusDesc, p.CEOUserName);
            allCertificates.push(certificate);
        });
    });
}

您已经使用 ([]) 将 observableArray 设置为空，因此将值推回到那里。此外，Knockout 会在您设置它们时知道这些值发生了变异，并且它会跟踪它们，因此无需调用 valueHasMutated。

接下来，我不认为您打算像您一样在视图模型中定义模型。把它放在你的模型之外，或者完全放在一个单独的 JavaScript 文件中。为了改进您的命名约定，我建议将证书重命名为 certificateModel 以便更清楚地表明这不是做某事的函数，而是一个模型。

define(['services/logger'], function (logger) {

var allCertificates = ko.observableArray();

var vm = {
    allCertificates: allCertificates,
    activate: activate,
    title: 'Certificates'
};

return vm;

});

var certificateModel = function (ClientID, RequestDate, UserName, StatusDescription, StatusCode, StatusDesc, CEOUserName ) {
    var self = this;
    self.ClientID = ko.observable(ClientID);
    self.RequestDate = ko.observable(RequestDate);
    self.UserName = ko.observable(UserName);
    self.StatusDescription = ko.observable(StatusDescription);
    self.StatusCode = ko.observable(StatusCode);
    self.StatusDesc = ko.observable(StatusDesc);
    self.CEOUserName = ko.observable(CEOUserName);
};

这里有一个 jsFiddle 或多或少地展示了你想要做什么。 jsFiddle 不支持 Durandal 视图模型组合，所以我不得不对其进行一些更改，但基本功能已经存在。

http://jsfiddle.net/DwHXR/2/