JSFiddle - React, Tailwind, and code Playground

by Kevin Van Lierde

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div id="container-1">
    <h4>App with private vars access</h4>
    <div id="menu">
        <select name='list' data-bind='options: listItems, value: selected'></select>
        <input type="text" data-bind="value: textVal">
    </div>
    <div data-bind="text: ko.toJSON(get())"></div>
        <strong>Data:</strong><div data-bind="text: ko.toJSON($data)"></div>
</div>
<div id="container-2">
    <h4>App with object properties access</h4>
    <div id="menu">
        <select name='list' data-bind='options: listItems, value: selected'></select>
        <input type="text" data-bind="value: textVal">
    </div>
    <div data-bind="text: ko.toJSON(selected)"></div>
        <strong>Data:</strong><div data-bind="text: ko.toJSON($data)"></div>
</div>

CSS

*[id*=container] { float: left; margin-right: 20px; width: 45%;}

JavaScript

function appWithPrivateVars() {
    var selectedItem = ko.observable('Option 3'),
        textVal =  ko.observable('Haha');
    this.selected = ko.computed({
        read: function() { return selectedItem(); },
        write: function(value) { /* add validation code here */  selectedItem(value); }
    });
    this.textVal =  ko.computed({
        read: function() { return textVal(); },
        write: function(value) { /* add validation code here */ textVal(value); }
    });
    this.listItems = ['Option 1','Option 2','Option 3'];
    this.get = function() { return selectedItem(); };
}
ko.applyBindings(new appWithPrivateVars(), document.getElementById('container-1'));

function appWithProperties() {
    this.textVal = ko.observable('Haha');
    this.selected = ko.observable('Option 3');
    this.listItems = ['Option 1','Option 2','Option 3'];
}
ko.applyBindings(new appWithProperties(), document.getElementById('container-2'));