Knockoutjs.com - Hello World Example

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

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample' id="bindings-area">   
    <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> 
    
    <button id="inside-alert">Inside bindings-area</button>
    
</div>
<hr/>

<button id="outside-alert">Outside bindings-area</button><br/><br/>
<button id="reset">Reset bindings</button>

JavaScript

ko.utils.domNodeDisposal.cleanExternalData = function () {
    // Do nothing. Now any jQuery data associated with elements will
    // not be cleaned up when the elements are removed from the DOM.
};


// Here's my data model
var ViewModel = function (first, last) {
    this.firstName = ko.observable(first);
    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.applyBindings(new ViewModel("Planet", "Earth"), document.getElementById("bindings-area")); // This makes Knockout get to work

$("#inside-alert ").click(function ()
{
  alert("works!");
});
$("#outside-alert ").click(function ()
{
  alert("works!");
});

$("#reset ").click(function ()
{
  	var element = $("#bindings-area")[0];
	ko.cleanNode(element);
    ko.applyBindings(new ViewModel("NEW", "Bindings"), document.getElementById("bindings-area"));
});