Knockoutjs.com - Hello World Example

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

by tyrsius

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div class='liveExample'>   
    <div data-bind="foreach: items">
        <p><input data-bind='value: name' /></p> 
    </div>
</div>

<pre data-bind="text: ko.toJSON($data)"></pre>

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 Item = function(name){
    this.name = ko.observable(name);
};

Item.prototype.toJSON = function(){
    return this.name;
};

// Here's my data model
var ViewModel = function() {
    this.items = ko.observableArray([new Item("hi"), new Item("there")]);
};
 
ko.applyBindings(new ViewModel());