Question

我有knockout js应用程序，我需要将json数据与从服务器端获取到视图模型的嵌套属性（不是json数组）绑定，然后显示绑定到该视图模型的数据。到目前为止，我已经创建了一个小提琴here你能帮助我将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"
                            }
                        }

        };

非常感谢任何帮助。

Answer 1

我修复了你的小提琴here。我需要添加jquery和knockout映射插件才能使它工作。

以下是所有HTML：

<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> 
</div>

这是Javascript：

    // 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"
        }
    }

};

function workOrderDetails(){
    var self = this;

    ko.mapping.fromJS(data, {}, self);        

    self.getPropertyCoordinates = ko.computed(function() {
        return self.Property.PropertyAddress.Latitude() + " , " + self.Property.PropertyAddress.Longitude();
    });
}

var viewModel = new workOrderDetails();

//function binding work order details to view
$(document).ready(function () {     
    ko.applyBindings(viewModel);
});

如何使用嵌套属性将具有嵌套属性的Json数据映射到具有嵌套属性的视图模型？

1 个答案: