JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<h1>AppViewModel</h1>

<div data-bind="text: ko.toJSON($root)"></div>

<div data-bind="foreach: data().beneficiaries">
    <p>First name: <input data-bind="value: $data.firstName"/></p>
    <p>Last name: <input data-bind="value:  $data.lastName"/></p>
    <hr/>
</div>

<hr/><hr/><hr/>

<div data-bind="with: slider">
    <h1>SliderViewModel</h1>
    <div data-bind="text: ko.toJSON($root)"></div>
    
    <div data-bind="foreach: beneficiaries">
        <p>First name: <input data-bind="value: firstName"/></p>
        <p>Last name: <input data-bind="value:  lastName"/></p>
        <hr/>
    </div>


</div>

JavaScript

function AppViewModel() {
    var self = this;
    
    self.data = ko.observable({
        beneficiaries: ko.observableArray([{
            firstName: ko.observable("igal"),
            lastName: ko.observable("steklov")
        }])
    });
    
    self.slider = new SliderViewModel(self.data().beneficiaries);
}

function SliderViewModel(beneficiaries) {
    var self = this;
    
    self.beneficiaries = beneficiaries;
}

ko.applyBindings(new AppViewModel());