"Latest" Base Fiddle
Latest copy of:
-jQuery templates
-KnockoutJS
-KO Mapping plugin
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<div data-bind="text: fullName"></div>
<ul data-bind="foreach: children">
<li data-bind="text: description"></li>
</ul>
JavaScript
var viewModel = {};
var data = {
id: "1",
firstName: 'Adam',
lastName: "Smith",
children: [ {id: "2", name: "Bob", age: 5}, {id: "3", name: "Chris", age: 7 }]
};
var Parent = function(data){
ko.mapping.fromJS(data, mapping, this)
}
var mapping = {
create:function(options){
var parent = new Parent(options.data);
parent.fullName = ko.computed(function(){
return parent.firstName() + " " + parent.lastName();
});
return parent;
},
'children': {
create: function(options) {
options.data.description = ko.computed(function(){
return options.data.name + " is " + options.data.age + " years old ";
});
return ko.mapping.fromJS(options.data);
}
}
}
viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);