0
나는 녹아웃 js 응용 프로그램을 가지고 있는데, json 데이터를 중첩 된 속성 (json 배열이 아님)과 바인딩하여 서버 측에서 뷰 모델로 가져온 다음 해당 뷰 모델에 바인딩 된 데이터를 표시해야합니다. 나는 지금까지 시도한 것을 가지고 바이올린을 만들었습니다 here json 데이터를 뷰에 매핑하는 것을 도와 주시겠습니까?nockout js를 사용하여 중첩 된 속성이있는보기 모델에 중첩 된 속성이있는 Json 데이터를 매핑하는 방법은 무엇입니까?
보기
에게<div>
<h2>WorkOrder Details</h2>
<ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="b">
<li data-role="list-divider">Work Order Details</li>
<li data-role="fieldcontain" data-bind="text:WorkOrderNo" id="WorkOrderNo"></li>
<li data-role="fieldcontain" data-bind="text:PurchaseOrderNo" id="PurchaseOrderNo"></li>
<li data-role="fieldcontain" data-bind="text:Status" id="Status"></li>
<li data-role="fieldcontain" data-bind="text:CallType" id="CallType"></li>
<li data-role="fieldcontain" data-bind="text:ServiceGroup" id="ServiceGroup"></li>
<li data-role="fieldcontain" data-bind="text:ServiceType" id="ServiceType"></li>
<li data-role="fieldcontain" data-bind="text:WorkDescription" id="WorkDescription"></li>
<li data-role="fieldcontain" data-bind="text:CreatedOn" id="CreatedOn"></li>
<li data-role="fieldcontain" data-bind="text:ExpectedCompletionOn" id="ExpectedCompletion"></li>
<li data-role="fieldcontain" data-bind="text:ExtendedTo" id="ExtendedTo"></li>
<li data-role="fieldcontain" data-bind="text:OnsiteOn" id="OnsiteOn"></li>
<li data-role="fieldcontain" data-bind="text:AssignedContractor" id="AssignedContractor"></li>
<li data-role="list-divider">Location</li>
<li data-role="fieldcontain">
<a data-bind="attr: { 'data-coordinates': getPropertyCoordinates }" class="property-coordinates" data-role="button" data-ajax="false" href="#"></a>
</li>
</ul>
자바 스크립트 모델
function WorkOrder() {
self = this;
self.CallNo = ko.observable(data.CallNo || "");
self.WorkOrderNo = ko.observable(data.WorkOrderNo || "");
self.PurchaseOrderNo = ko.observable(data.PurchaseOrderNo || "");
self.WorkDescription = ko.observable(data.WorkDescription || "");
self.CallPriority = ko.observable(data.CallPriority || "");
self.CallType = ko.observable(data.CallType || "");
self.ServiceGroup = ko.observable(data.ServiceGroup || "");
self.ServiceType = ko.observable(data.ServiceType || "");
self.Status = ko.observable(data.Status || "");
self.AssignedContractor = ko.observable(data.AssignedContractor || "");
self.CreatedOn = ko.observable(data.CreatedOn || "");
self.ExtendedTo = ko.observable(data.ExtendedTo || "");
self.OnSiteOn = ko.observable(data.OnSiteOn || "");
self.CompletedOn = ko.observable(data.CompletedOn || "");
self.ExpectedCompletionOn = ko.observable(data.ExpectedCompletionOn || "");
};
//Work Order Detail View Model
function WorkOrderDetails() {
self = this;
//self.WorkOrder = ko.observable();
self.WorkOrder = new WorkOrder();
self.Property = new Property();
function Property() {
self.PropertyNo = ko.observable();
self.ClientCode = ko.observable();
self.PropertyName = ko.observable();
self.PropertyAddress = new Address();
function PropertyAddress() {
self.AddressLine1 = ko.observable();
self.AddressLine2 = ko.observable();
self.AddressLine3 = ko.observable();
self.Country = ko.observable();
self.State = ko.observable();
self.PostalCode = ko.observable();
self.Latitude = ko.observable();
self.Longitude = ko.observable();
self.GeoHash = ko.GeoHash();
}
};
//Return the property coordinates from bound data
self.getPropertyCoordinates = ko.computed(function() {
alert("Get Property Co-ordinates Clicked");
return self.PropertyAddress.Latitude + " , " + self.PropertyAddress.Longitude;
},self);
};
//function binding work order details to view
self.fetchWorkOrderDetails = function() {
$.map(data,WorkOrderDetails);
};
ko.applyBindings(WorkOrderDetails);
// Data that comes as JSON
var data = {
"CallNo":6473179,
"WorkOrderNo":6473179,
"PurchaseOrderNo":46163,
"WorkDescription":"Please attend site ",
"CallPriority":"76 Hours",
"CallType":"Reactive Maintenance",
"ServiceGroup":"Electrical Services",
"ServiceType":"Electrical Tubes/Globes",
"Status":"Extended",
"AssignedContractor":"CTS Electrics Pty Ltd",
"CreatedOn":"2013-03-18T08:40:45",
"ExtendedTo":"2013-05-17T00:00:00",
"OnsiteOn":"2013-05-09T08:00:00",
"CompletedOn":"0001-01-01T00:00:00",
"ExpectedCompletionOn":"2013-05-17T00:00:00",
"Property":{
"PropertyNo":46020096,
"ClientCode":"POST",
"PropertyName":"Canberra South MCDCBC",
"PropertyAddress":
{
"AddressLine1":"Cnr Canberra Ave and Nyrang St",
"AddressLine2":"",
"AddressLine3":"",
"Country":"Australia",
"State":"Australian Capital Territory",
"PostalCode":"2609",
"Latitude":"-35.326120",
"Longitude":"149.154458",
"GeoHash":"r3dp414fqvbc"
}
}
};
내 코드입니다
도움이된다면 정말 감사하겠습니다.
당신은 당신에게 jsfiddle 선생님을 공유하시기 바랍니다 수 있을까?. – msrameshp
죄송합니다 ..... 여기에 http://jsfiddle.net/YQXY4/20/ – RodneyTrotter
고맙습니다 .--). 그것은 작동 ;-). – msrameshp