JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-1.3pre.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<h1 data-bind="text: Title"></h1>
<input type="text" name="changer" data-bind="value: GeneratePolicyNumber" />
<input type="radio" name="GeneratePolicyNumber" value="true" data-bind="checked: GeneratePolicyNumber" />Yes
<input type="radio" name="GeneratePolicyNumber" value="false" data-bind="checked: GeneratePolicyNumber" />No


<button name="clickMe" id="clickMe">ClickMe</button>

<div class="readout">
    <h3>What's in the model?</h3>
    <table>
        <tr>
            <td class="label">Bool value:</td>
            <td data-bind='text: booleanValue() ? "True" : "False"'></td>
        </tr>
        <tr>
            <td class="label">Radio button selection:</td>
            <td><input type="text"  data-bind="value: radioSelectedOptionValue"></td>
        </tr>
    </table>
</div>
 
<hr />
<table>
    <tr>
        <td class="label">Text value (updates on change):</td>
        <td><input data-bind="value: stringValue" /></td>
    </tr>
    <tr>
        <td class="label">Text value (updates on keystroke):</td>
        <td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
    </tr>
    <tr>
        <td class="label">Checkbox:</td>
        <td><input type="checkbox" data-bind="checked: booleanValue" /></td>
    </tr>
    <tr>
        <td class="label">Radio buttons:</td>
        <td>
            <label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
            <label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
            <label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
        </td>
   ...

CSS

* {
    font-family: helvetica;
    font-size: 13px;
    font-color: #111;
}

JavaScript

/*
var jsonFromServer= {
    "Title": "Test with bool value.",
    "GeneratePolicyNumber": "false" // must be a string
};


var viewModel = ko.mapping.fromJS(jsonFromServer);


var viewModel = {
  "Title": ko.observable("Test with bool value."),
  "GeneratePolicyNumber": ko.observable("true")
};

viewModel.prototype.setValue = function(v){
  this.GeneratePolicyNumber(v.toString());
};
    
ko.applyBindings(viewModel);
*/
var viewModel = {
    Title: ko.observable("Test with bool value."),
    GeneratePolicyNumber: ko.observable("true"),
    stringValue : ko.observable("Hello"),
    passwordValue : ko.observable("mypass"),
    booleanValue : ko.observable(true),
    optionValues : ["Alpha", "Beta", "Gamma"],
    selectedOptionValue : ko.observable("Gamma"),
    multipleSelectedOptionValues : ko.observable(["Alpha"]),
    radioSelectedOptionValue : ko.observable("Beta")
    
};
    
ko.applyBindings(viewModel);

$('input[type="radio"]').bind('change', function(){
  alert('test');
});

$('input[type="checkbox"]').bind('click', function(){
  alert('checkbox changed');
});

$('#clickMe').click(function(){
    var bool = Math.random() > 0.5 ? true : false;
    //viewModel.setValue(bool);
    viewModel.booleanValue(bool);
});