顯示加載div而淘汰計算功能正在運行

Question

有點新的淘汰賽只是試圖找出如何顯示加載一個div而ko計算功能正在運行。我不確定我需要什麼，也許我需要使用淘汰賽擴展程序？

這裏的任何地方都是小提琴。

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 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); 
}); 

Answer 1

我不知道爲什麼你需要在計算Show/Hide DIV可能是其一個模擬了Ajax調用我相信的。

你可以通過這樣的東西來實現它。查看下面代碼中的註釋行，查看我所做的小改動。

觀點：

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

視圖模型：

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 a subscription 
     //show loading 
     self.showloading(true); 
     setTimeout(function() { //Delaying execution to show Loader 
      self.showloading(false); 
      self.compute(val ? val.toUpperCase() : val) //Assigning value to observable inside computed . 
     }, 3000) 
    }); 
} 

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

PS：您可以使用，如果你想避免計算的訂閱過的。

工作樣品去here