asynchronous - show loading div while Knockout computed function is running -

a bit new knockout trying figure out how show loading div while ko computed function running. i'm not quite sure need maybe need use knockout extenders?

anywhere here fiddle.

http://jsfiddle.net/zf5k9rxq/10/

html

<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 = 0;         var j = 0;         while (i < 100000) {             i++;             j = 0;             while (j < 80000) {                 j++;              }         }         // end long running function          //hide loading , return         this.showloading(false);         return this.val().touppercase();     }, this);    }  var mymodel = new model();  $(document).ready(function () {     ko.applybindings(mymodel); }); 

i'm not sure why need show/hide div in computed may mock of ajax call believe .

you can achieve . check commented lines in below code see minor changes i've made .

view:

<input data-bind="value: val" /> <p><span data-bind="text: compute,visible:!showloading()"></span></p> /*toggling span visibility if loader running*/ <div data-bind="if: showloading">loading...</div> 

viewmodel:

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 subscription          //show loading         self.showloading(true);         settimeout(function () { //delaying execution show loader             self.showloading(false);             self.compute(val ? val.touppercase() : val) //assigning value observable inside computed .         }, 3000)     }); }  $(document).ready(function () {     ko.applybindings(new model()); }); 

ps:you can make use of subscribe if want avoid computed.

working sample goes here