KnockoutJS 稍后更新答案

【问题标题】：KnockoutJS later updateKnockoutJS 稍后更新
【发布时间】：2019-02-19 21:41:49
【问题描述】：

我想在加载页面时显示带有 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());

【问题讨论】：

您想使用 gif.. 如果在服务器响应之前进度条已填满怎么办？或者你想要这种 GIF 吗？ giphy.com/gifs/mashable-3oEjI6SIIHBdRxXI40
顺便说一句，你有代码吗？现在你的问题很广泛。可以通过多种方式回答
@Ray 是的，我就是这个意思
@Ray 伪代码稍后会添加

标签： javascript ajax knockout.js

【解决方案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>

【讨论】：

我添加了代码。请仔细阅读问题。我首先需要添加标记，然后填充它