JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<div id="one">
<input type="checkbox" data-bind="checked:iAmChecked"/><label>Check this</label>
</div>

<div id="two">
<input type="checkbox" data-bind="checked:firstWasChecked"/><label>First Was Checked</label>
</div>

<button id="dofoo">Update</button>

CSS

#one,#two{padding:10px;border:dashed 1px #A5A5A5;}
#one input, #two input{margin-right:10px;}

JavaScript

var firstViewModel = {
    iAmChecked : ko.observable(false)
},
secondViewModel = {
    firstWasChecked : ko.observable(false)
};

firstViewModel.iAmChecked.subscribe(function(value){
    foo(value);
});

function foo(checked){
    secondViewModel.firstWasChecked(checked);
}

$(document).ready(function(){
    ko.applyBindings(firstViewModel, $('#one')[0]);
    ko.applyBindings(secondViewModel, $('#two')[0]);
    
    $('#dofoo').click(function(){
        foo(firstViewModel.iAmChecked());
        return false;
    });
});