KnockoutJS позднее обновление

Question

Я хочу, чтобы при загрузке страницы появлялась HTML-разметка с индикатором GIF.Затем я использую Ajax для получения данных - заполните разметку и скройте GIF.Как мне добиться этого поведения с KnockoutJS

var Item = function () {
    var self = this;
    self.name = ko.observable();
};

var ItemList = function () {
    var self = this;
    self.list = ko.observableArray();
    var blocks = await get_blocks();
    $.each(blocks, function (index, value) {
        self.list.push(new Item());
    });

      //first, show the HTML-blocks, and then fill them

    $.each(self.list(), async function (index, value) {
        var data = await getData("some-url");
        self.list()[index].name = data.name;
    });
};
ko.applyBindings(new ItemList());

Answer 1

Вот пример:

var viewModel = function(){
	var self = this;
  self.loadingData = ko.observable(false);
  
  self.callServer = function(){
    self.loadingData(true);
    $.get('https://restcountries.eu/rest/v2/all', function(data){
      console.log(data);
      self.loadingData(false);
    });
  };

};

ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- ko if: loadingData -->
 <img src="https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp">
<!-- /ko -->

<button data-bind="click: callServer">Call</button>