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/

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

1 个答案: