KnockoutJS稍后更新

Question

我想在加载页面时显示带有GIF进度条的HTML标记。然后，我使用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

这是一个例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes-area">

  <div class="inputRadioGroup">
    <input type="checkbox" id="by-card">
    <label for="by-card">Card</label>
  </div>


  <div class="inputRadioGroup">
    <input type="checkbox" id="by-paypal">
    <label for="by-paypal">Paypal</label>
  </div>


</div>


<div class="storesList">

  <div class="store-block by-card">
    <div class="store-name">Apple Store</div>
    <div class="rating">&bigstar; 4.5</div>
    <div class="minorder">100 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block by-paypal">
    <div class="store-name">Nokia Store</div>
    <div class="rating">&bigstar; 3.8</div>
    <div class="minorder">250 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>

  <div class="store-block by-card">
    <div class="store-name">Samsung Store</div>
    <div class="rating">&bigstar; 4.0</div>
    <div class="minorder">25 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block by-paypal">
    <div class="store-name">Linux</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="minorder">50 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>



</div>

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