표시 로딩 이미지

Question

간단한 기능을 얻을 수 있습니다 및 서버에서 데이터를로드 :

function getdata(stepNumber){ 
      return $.get("./api/data_count.php", {stepNumber: stepNumber}) 
      .fail(function (textStatus, errorThrown){ 
        console.error("Error ! Unable to get step " + number + " count." + "Error: " + errorThrown + ", Status: " + textStatus); 
      }); 
     } 

는 관측 녹아웃 데이터를 할당되는 .done 차이 방법을 사용하여 :

getdata(1).done(function(data){ 
         self.dataCount($.parseJSON(data)); 
        }); 

다음을 통해 html :

<td><span data-bind = "text: dataCount"></span></td> 

검색어가 약 15 초 걸린다는 점을 제외하고는 모두 코드와 잘 작동합니다. 이 카운트를 반환하고 응답이 기다리는 동안 다음 스팬에서 로딩 이미지 나 메시지를 표시하는 방법을 모르겠습니다.

<span data-bind = "text: dataCount"></span> 

Answer 1

로더를 표시하거나 숨기려면 관찰 가능을 전환해야합니다. 뭔가 같은 :

var Vm = function() { 
 
    var self = this; 
 
    self.showLoader = ko.observable(false); 
 
    self.showResults = ko.pureComputed(function() { 
 
    return !self.showLoader(); 
 
    }) 
 

 
    self.getdata = function(stepNumber) { 
 
    self.showLoader(true); 
 
    return $.get("./api/data_count.php", { 
 
     stepNumber: stepNumber 
 
     }) 
 
     .done(function(data) { 
 
     self.dataCount($.parseJSON(data)); 
 
     self.showLoader(false); 
 
     }) 
 
     .fail(function(textStatus, errorThrown) { 
 
     console.error("Error ! Unable to get step " + number + " count." + "Error: " + errorThrown + ", Status: " + textStatus); 
 
     self.showLoader(false); 
 
     }); 
 
    } 
 

 

 

 
    return self; 
 
}

<table> 
 
    <tr> 
 
    <td><span data-bind="text: dataCount, visible: showResults"><img src='path/to/loader' data-bind="visible: showLoader" /></span> 
 
    </td> 
 
    </tr> 
 
</table>