Complex View Model Knockout
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<p>Open the console.</p>
JavaScript
var King = function(data) {
var self = this;
self.name = ko.observable();
}
var State = function(data) {
var self = this;
self.name = ko.observable();
self.king = ko.observable(new King());
self.cities = ko.observableArray([]);
self.selected_city = ko.observable(new City());
var mapping = {
'ignore': ['selected_city'],
'cities': {
create: function(options) {
return new City(options.data);
}
},
'king': {
create: function(options) {
return new King(options.data);
}
}
};
ko.mapping.fromJS(data || self, mapping, self);
};
var City = function(data) {
var self = this;
self.name = ko.observable();
var mapping = {
'streets': {
create: function(options) {
return new Street(options.data);
}
}
};
ko.mapping.fromJS(data || self, mapping, self);
};
var Street = function(data) {
var self = this;
self.name = ko.observable();
ko.mapping.fromJS(data || self, {}, self);
};
var data = {
state: {
name: 'SD',
king: 'Steve',
cities: [{
name: 'Sioux Falls',
streets: [{
number: 1},
{
number: 3}]},
{
name: 'Rapid City',
streets: [{
number: 2},
{
number: 4}]}]
}
};
var vm = new State(data.state);
console.log("vm", vm);
console.log(ko.mapping.toJS(vm));
console.log(ko.mapping.toJS(vm.cities()[0]));
console.log(ko.mapping.toJS(vm.cities()[0].streets()[0]));
var newState = new State();
newState.name("Wolfgang")
console.log(ko.mapping.toJS(newState));