Knockoutjs.com - Hello World Example

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

by srinivas naidu

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div class='liveExample'>   
    <p>First name: <input data-bind='value: firstName' /></p> <br/>
    <p>Last name: <input data-bind='value: lastName' /></p> <br/>
    <h2> <span data-bind='text: fullName'> </span>!</h2>  
</div>

JavaScript

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first).extend({logChange: "Sri" });
    this.lastName = ko.observable(last);
 
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
    
    ko.extenders.logChange = function(target, option) {
        alert("log change function")
    target.subscribe(function(newValue) {
        alert("subscribe function:  "+option + ": " + newValue);
    });
    return target;
};
};
 
ko.applyBindings(new ViewModel("Hello", "World")); // This makes Knockout get to work