단일 페이지 응용 프로그램 데이터가보기에 표시되지 않음

Question

데이터보기 모델의 녹아웃 코드를 볼 수있는 MVC 4 단일 페이지 응용 프로그램이 있습니다. 보기에서 foreach를 수행하고 루프를 통과 할 때마다 점을 볼 수 있지만 데이터가 표시되지 않습니다. 그것은 관찰 가능한 배열에 50 개의 원소가 있지만 각각에 데이터가없는 것처럼 보입니다. 그러나 getJson 호출을 단계별로 수행하면 json 형식으로 데이터를 볼 수 있습니다. 뭐가 잘못 되었 니? 여기

는

<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 코드 - 내 caapproval.html보기입니다 뷰 모델 코드 - 첫째로, 나는 당신이 observableArray에 결과를 밀어하려고 생각

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

및 해당 데이터의 임시 소유자가 아닙니다. 그런 경우 나는 다음에 코드를 조정 제안 -

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/