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>
<span data-bind="text: id"></span>
<br/>

 <!-- ko foreach: children -->

<span data-bind="text: name"></span>

 <!-- /ko -->

<br/>

<button data-bind="click: selectChild">click me</button>

<br/>

<span data-bind="text: selectedChild().name"></span>

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

CSS

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

JavaScript

var originalData = {
    id: 1,
    name: "Main",
     children: [ { id: 2, name: "bob" }, { id: 3, name: "ted" } ],
    selectedChild:  { id: 2, name: "bob" }
};

var viewModel = function(){
  var self = this;   
  $.getJSON("/getdata", function(allData) {
       self = ko.mapping.fromJS(<allDatak>    </allDatak>);
    });    
};

var viewModel = 
viewModel.selectedChild = ko.observable({id: 3, name: "blah"});

viewModel.selectChild = function(){
 var obj =  { id: 9, name: "new" };
//    viewModel.selectedChild.name("test");
 viewModel.selectedChild(obj);
}



ko.applyBindings(viewModel);