JSFiddle - React, Tailwind, and code Playground

by jschr

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div id="container1">
    <h2>ViewModel 1</h2>
    <div class="row">inner: <input type="text" data-bind="value: inner" /></div>
    <div class="row">shared1: <input type="text" data-bind="value: shared1" /></div>
    <div class="row">shared2: <input type="text" data-bind="value: shared2" /></div>
</div>
<div id="container2">
    <h2>ViewModel 2</h2>
    <div class="row">inner: <input type="text" data-bind="value: inner" /></div>
    <div class="row">shared1: <input type="text" data-bind="value: shared1" /></div>
    <div class="row">shared2: <input type="text" data-bind="value: shared2" /></div>
</div>

CSS

#container1, #container2 {
    float: left;
    margin: 8px 16px;
}

.row {
  padding: 2px;   
}

h2 {
  font-weight: bold;   
}

JavaScript

function GlobalViewModel(){
    var self = {}
        
    self.shared1 = ko.observable();
    self.shared2 = ko.observable();
    
    return self;
}

function ViewModel1(global){
    var self = {};
    
    $.extend(self, global);
    
    self.inner = ko.observable();
        
    return self;
}

function ViewModel2(global){
    var self = {};
    
    $.extend(self, global);
    
    self.inner = ko.observable();
        
    return self;
}


var globalViewModel = new GlobalViewModel();
var viewModel1 = new ViewModel1(globalViewModel);
var viewModel2 = new ViewModel2(globalViewModel);

ko.applyBindings(viewModel1, $('#container1')[0]);
ko.applyBindings(viewModel2, $('#container2')[0]);