Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by leggetter

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

var viewModel = {
    wantsSpam: ko.observable(true) // Initially checked
};
viewModel.wantsSpam.subscribe(function(newValue) {
    console.log("The checkbox is " + ( newValue? 'checked' : 'not checked' ) );
});     

function hack() {
    viewModel.wantsSpam( true );
}

ko.applyBindings(viewModel);