Knockout Overview

Simple KO overview demo

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>

CSS

body {padding: 10px; font: 12px 'SansationRegular', Arial, sans-serif;}
span {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
}
/*.text*/
.caption {
    font: 12px 'SansationBold', Arial, sans-serif;
    color: olivedrab
}
input, select {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
    clear: left;
    color: rgb(47, 123, 163);
}
input[type=text] {
    width: 100px;
}
select {
    width: 120px;
}
.negative {
    color: red;
}
.positive {
    color: green;
}
table {
    margin: 8px;
}
thead {
    font: 14px 'SansationBold', Arial, sans-serif;
}
td {
    border-bottom: 1px solid lightgray;
}
.resultsPanel 
{
    margin: 8px;
    padding: 4px;
    height: 300px;
    width: auto;
    border: gray dashed thin;
    overflow:scroll;
    overflow-x: hidden;
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
button {
    -moz-box-shadow: inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
    -o-box-shadow: inset 0 1px 0 0 #ffffff;
    box-shadow: inset 0 1px 0 0 #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top,...

JavaScript

var viewModel = {
        wantsSpam: ko.observable(false),
        spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
    };
 
    // ... then later ...
    viewModel.spamFlavor("msg"); 
   ko.applyBindings(new viewModel());