Question

加载页面时，脚本会调用api来获取列表数据。

function AccountTypeViewModel() 
{
    var self = this;
    self.list = ko.observableArray();
    self.selectedItems = ko.observableArray();
    var baseUri = 'url';
    $.getJSON(baseUri, self.list);
}

ko.applyBindings(new AccountTypeViewModel());

当我使用此方法getJSON时，它会将数据从服务器映射到self.list。如何使用回调方法绑定？我使用动态绑定。我想显示图像加载util getJSON已经完成。

提前致谢..

Answer 1

您使用observableArray函数调用$ .getJSON作为成功回调。它设置您的可观察值的事实是因为KO只需要1个参数并忽略其余的参数。

您应该提供成功函数，或者（优选）使用jQuery promise。

$.getJSON( baseUri )
  .done( function(data, status) {
    self.list(data);
  })
  .always( function() {
    // Will be called on either success or failure
    // Clear loading image here
  });

Answer 2

你应该这样做：

function AccountTypeViewModel() 
{
   var self = this;
   self.list = ko.observableArray();
   self.selectedItems = ko.observableArray();
   var baseUri = 'url';
   displayLoadingImg(); // display loading image
   $.getJSON(baseUri, function(data){ // callback
      self.list(data); // bind data
      hideLoadingImg(); // hide loading image
   });
}

了解更多here

Answer 3

这是我经常使用的“技巧”：

$(document).on({
    ajaxStart: function() { $("body").addClass("loading");},
    ajaxStop: function() { $("body").removeClass("loading");}    
});

然后简单的CSS：

.processing {
    display:    none;
    position:   fixed;
    z-index:    1000000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/img/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

body.loading {
    overflow: hidden;   
}

body.loading .processing {
    display: block;
}

并添加div：

<div class="processing"><!-- Place at bottom of page --></div>

这样，您将显示/隐藏每个AJAX调用的“加载”动画。

使用getJSON时添加加载图像

3 个答案: