javascript - knockout : Async call not finished before ko. applyBindings()。最好、最简单的做法？

Question

我知道这个问题可能以前在这里被问过，但我似乎无法获得任何“最佳实践”，而我作为一个新手，可以以一种简单易懂的方式与之相关......

knockout 码

$(document).ready(function() {

function viewModel() {

    var self = this;
    self.contacts = ko.observableArray();

        $.ajax({
            type: "POST",
            url: "ClubWebServices.asmx/GetContacts",
            data: "{'abc':'" + 123 + "'}", // if ur method take parameters
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var contactData = data.d;
                console.log("Nr 1: " + contactData);
                self.contacts(contactData);

                console.table(self.contacts());
            },
            dataType: "json",
            failure: function(error) {
                console.log(error);
            }
        });

    console.table("Nr 2: " + self.contacts());

    ko.applyBindings(new viewModel());

}

结果是 console.log Nr 2 在 Console.log nr 1 之前调用。

那么..如何解决这个问题而不创建一个层次结构，我必须实现使用 OnSuccess 和 onFailure 事件的 DataService 层？

Answer 1

这里有一些想法。

1. 您正在尝试从函数声明中创建 viewModel 实例，这可能会导致 ko 绑定(bind)出现问题。
2. 另一个注意事项是，您在成功回调中对 self 的引用可能与您想象的不同。使用调试器可以让您清楚地了解这一点。

我会尝试重新安排一些这样的事情:

$(document).ready(function() {

  var viewModel = function (contactData) {
    var self = this;
    self.contacts = ko.observableArray(contactData);
  }

  $.ajax({
    type: "POST",
    url: "ClubWebServices.asmx/GetContacts",
    data: "{'abc':'" + 123 + "'}", // if ur method take parameters
    contentType: "application/json; charset=utf-8",
    success: function (data) {
      var contactData = data.d;
      console.log("Nr 1: " + contactData);

      ko.applyBindings(new viewModel(contactData));
    },
    dataType: "json",
    failure: function(error) {
      console.log(error);
    }
  });  

}

更改:我在 ajax 请求之前关闭了 viewModel 声明，并将 contactData 传递给新的 viewModel 构造函数。

此外，创建 jsfiddle 将极大地帮助查找错误原因。