JSFiddle - React, Tailwind, and code Playground

by tsenyi

HTML

<div data-bind="with: company">
    <h1 data-bind="text: name, click: $root.onCompClicked"></h1>
    <div data-bind="with: salesDepartment">
        Manager of SalesDepartment: <strong data-bind="text: manager"></strong> <br/>
        Employees:<br/>
        <ul data-bind="foreach: employees">
            <li><span data-bind="text: $data, click: $parents[1].click"></span></li>
        </ul>
    </div>
</div>
<div>Company was clicked <strong data-bind="text: compClicked"></strong> times</div>
<div>Employees were clicked <strong data-bind="text: employeesClicked"></strong> times</div>

JavaScript

function AppViewModel() {
    var self = this;
    
    self.company={name:'ABC', salesDepartment:{manager:'Mgr',employees:['Smith','John']}, click:function(){self.onCompClicked();}};
    
    self.compClicked=ko.observable(0);
    self.employeesClicked=ko.observable(0);
    
    self.onCompClicked=function(){
        self.compClicked(self.compClicked()+1);
    }
    self.onEmployeeClicked=function(){
        self.onCompClicked();
        self.employeesClicked(self.employeesClicked()+1);
    }
}
ko.applyBindings(new AppViewModel());