JSFiddle - React, Tailwind, and code Playground

by tlarson

HTML

<div>
    <!-- ko with:basement -->
        <!-- ko with: sofa -->
            <div>Where am I? <span data-bind="text:name"></span></div>            
            <div>My Parent is <span data-bind="text:$parent.name"></span></div>            
        <!-- /ko -->
    <!-- /ko -->
    
    <hr/>

    <!-- ko with: basement.sofa -->
            <div>Where am I? <span data-bind="text:name"></span></div>            
            <div>My Parent is <span data-bind="text:$parent.name"></span></div>            
    <!-- /ko -->
</div>

JavaScript

var SofaViewModel = function() {
    var self = this;
    self.name = "Sofa";
};

var BasementViewModel = function() {
    var self = this;
    self.name = "Basement";
    self.sofa = new SofaViewModel();
};

var HouseViewModel = function() {
    var self = this;
    self.name = "House";
    self.basement = new BasementViewModel();
};

ko.applyBindings(new HouseViewModel());