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

我有一个MVC4单页应用程序，在其中可以看到data viewmodel的淘汰代码。我在视图中做了一个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>

---

首先，我相信你是想把结果推到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);
        });
    });
}

您已经使用（[]）将ObservalArray设置为空，因此将值推回到那里。此外，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);
};

下面是一个JSFIDLE，或多或少地显示了您正在尝试做什么。JSFIDLE不支持Durandal视图模型组合，因此我不得不对其进行一些修改，但基本功能仍然存在

---

我更改了viewmodel代码，但仍然遇到同样的问题。没有可见的数据。然后我将视图代码更改为您在Fiddle中发送的代码，并得到错误“router not defined（路由器未定义）”。在某个地方你提到了durandals路由器，但你从来没有定义它。我发现了这个问题。在我的原始代码-“return allCertificates（）；”中，没有将数据推送到allCertificates可观察数组中。更正后的代码是“returnallcertificates（data）；”。我还必须添加kadumel的certificateModel变量，并匹配从web api返回的字段名（它们区分大小写）。我还将我的模型与视图模型代码分离。谢谢你，卡杜梅尔。你让我走对了路！

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