JSFiddle - React, Tailwind, and code Playground

by KodeKreachor

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>

JavaScript

var StateViewModel = function(data){
    this.name = ko.observable();
    this.$type = 'StateViewModel';
    ko.mapping.fromJS(data, mapping, this);
}

var CityViewModel = function(data){
    this.name = ko.observable();
    this.$type = 'CityViewModel ';
    ko.mapping.fromJS(data, mapping, this);
}

var StreetViewModel = function(data){
    this.name = ko.observable();
    this.$type = 'StreetViewModel';
    ko.mapping.fromJS(data, mapping, this);
}
    
var mapping = {
    'cities': {
        create: function(options) {
            return new CityViewModel(options.data);
        }
    },
    'streets': {
        create: function(options) {
            return new StreetViewModel(options.data);
        }
    }
}


var data = { state: {name:'SD', cities:[{name:'Sioux Falls',streets:[{number:1},{number:3}]},
                                        {name:'Rapid City',streets:[{number:2},{number:4}]}]}};

var vm = new StateViewModel(data.state)
console.log(vm);
console.log(vm.$type);
console.log(vm.cities());
console.log(vm.cities()[0].$type);
console.log(vm.cities()[0].streets());
console.log(vm.cities()[0].streets()[0].$type);