Knockoutjs.com - Hello World Example

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

by supercool

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: compute,visible:!showloading()"></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);
    self.compute = ko.observable();

    ko.computed(function () {
        var val = self.val(); //Creating s subscription 
        //show loading
        self.showloading(true);
        setTimeout(function () {
            self.showloading(false);
            self.compute(val ? val.toUpperCase() : val)
        }, 3000)
    });
}

var mymodel = new model();

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