Mapping sample

by graphicsxp

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
 <div data-bind="with: QuoteListViewModel">
   <ul data-bind="foreach: Quotes">
     <li data-bind="text:ProductName"></li>
   </ul>        
There are <span data-bind="text: Quotes().length"></span> quotes in the array.
</div>

<button data-bind="click:getQuotes">get quotes</button>
<button data-bind="click: selectQuote">select quote</button>

<div data-bind="with: QuoteSelectedViewModel">
    selected quote is : <span data-bind="text: ProductName"></span>
     <!-- ko foreach: CoverQuotesViewModel -->
    <br/>    
        <input type="checkbox" data-bind="checked: IsSelected"></input>
        <input type="text" data-bind="value: Label, enable: IsSelected"></input>
    <!-- /ko -->
</div>

<div data-bind="text: ko.toJSON(viewModel)"></div>

CSS

input { margin: 2px; }
ul { margin-left: 10px; }

JavaScript

var originalData = {
   "CarInfoViewModel": {
      "CarInfo": {
         "EngineCapacity": 1500,
         "CarValue": 15000,
         "AudioValue": 1000,
         "AdditionalSeats": 1,
         "FirstRegistration": "2013-01-01T00:00:00"
      }
   },
   "DriverInfoViewModel": {
      "DriverInfo": {
         "NoClaimsDegree": 1,
         "DrivingLicenceDate": "2013-02-10T00:00:00",
         "DisasterHistory": 0
      }
   },
   "Id": "d2420691-e28a-4128-a983-734bfec212e1",
   "RequestDate": "2013-03-14T09:11:30.5426624+01:00",
   "CatalogDate": "2013-01-01T00:00:00",
   "Language": 0,
   "ViewTitle": "Votre devis auto",
   "QuoteSelectedViewModel": {
      "ProductName": "",
      "MonthPrice": 0,
      "QuarterPrice": 0,
      "BiannualPrice": 0,
      "YearPrice": 0,
      "CoverQuotesViewModel": []
   },
   "QuoteListViewModel": {
       "Quotes": [],
      "Products": [],
      "CoverPrices": [],
      "TotalPrices": []
   }
}

var viewModel = ko.mapping.fromJS(originalData);
viewModel.QuoteSelectedViewModel = ko.observable();

viewModel.selectQuote = function(){
   viewModel.QuoteSelectedViewModel( {
      "ProductName": "Perfect",
      "MonthPrice": 0,
      "QuarterPrice": 0,
      "BiannualPrice": 0,
      "YearPrice": 0,
      "CoverQuotesViewModel": [ {
            "ProductName": "Select",
            "Label": "Première Assistance 24h/24 (GRATUITE)",
            "IsVisible": true,
            "IsMandatory": true,
            "IsSelected": false,
            "IsChoice": false,
            "IsComposite": false,
            "YearPrice": "451451",
            "BiannualPrice": 0.49,
            "QuarterPrice": 0.2475,
            "MonthPrice": 0.08333333333333333,
            "Childs": [],
            "SelectedCoverQuote": null
         },
         {
            "ProductName": "Select",
            "Label": "Assistance PLUS 24h/24",
            "IsVisible": true,
            "IsMandatory": false,
            "IsSelected": true,
            "IsChoice":...