Knockoutjs.com - Hello World Example

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

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<input data-bind="value: val" />
<p><span data-bind="text: comp"></span>
</p>
<div data-bind="if: showloading">Loading...</div>

JavaScript

function model() {
    var self = this;

    self.val = ko.observable("hello");
    self.showloading = ko.observable(true);

    this.comp = ko.computed(function () {
        //show loading
        this.showloading(true);
        
          // begin long running function
        var i = 0;
        var j = 0;
        while (i < 100000) {
            i++;
            j = 0;
            while (j < 80000) {
                j++;

            }
        }
        // end long running function
        
        //hide loading and return
        this.showloading(false);
        return this.val().toUpperCase();
    }, this);



}

var mymodel = new model();

$(document).ready(function () {
    ko.applyBindings(mymodel);
});