Knockoutjs.com - Hello World Example

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

by Sandeep Kumar

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div id='dvKnockout'>   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
</div>

CSS

body { font-family: arial; font-size: 14px; }
#dvKnockout { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
#dvKnockout input { font-family: Arial; }
#dvKnockout h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

//view model.
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
 
    // fullName computed based on first and last name.
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};
 
// This makes Knockout get to work.
ko.applyBindings(new ViewModel("Sandeep", "Kumar"));