サーバー側からビューモデルにフェッチされたネストされたプロパティ(json配列ではない)を使用してjsonデータをバインドし、そのビューモデルにバインドされたデータを表示する必要があるノックアウト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>
Javascript モデル
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"
}
}
};
どんな助けでも本当に感謝しています。