Javascript 敲除：在ko.applyBindings（）之前未完成异步调用。最佳、最简单的实践？

我知道这个问题以前可能在这里被问过，但我似乎找不到任何“最佳实践”。。我作为一个菜鸟，可以用一种简单易懂的方式与

淘汰码

$(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 1之前调用console.log Nr 2

---

所以。。我如何解决这个问题而不创建一个层次结构，在这个层次结构中我必须实现使用OnSuccess和onFailure事件的DataService层

以下是一些想法

您试图从函数的声明中创建viewModel的实例，这可能会导致ko绑定出现问题

另一个注意事项是，您在成功回调中对

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

构造函数

---

另外，创建JSFIDLE将大大有助于找到错误的原因。

我认为您的代码没有任何问题

• 在ViewModel构造函数中，将模型绑定到DOM

• 在服务回调之后，将数据添加到ObservalArray，然后ko将更新绑定DOM

如果您希望在填写了

self.contacts

后调用“Nr 2”表，请订阅：

var initialized = self.contacts.subscribe(function (newValue) {
    console.table("Nr 2: " + self.contacts()); // could use newValue instead
    initialized.dispose();
});

dispose

调用可防止以后的更新再次发生。或者也许你想要它，我不知道

---

哦，正如Julian Soro所指出的，不要在viewmodel创建函数中调用applyBindings。

尝试移动

ko.applyBindings（new viewmodel（））进入成功回调耶。。我试过朱利安·索罗，但是。。。然后“函数viewModel（）{}没有被执行…知道怎么做吗？…而且…如果我使用viewModel（）调用它，函数被调用了两次…很自然，因为我在成功调用中返回了新的viewModel（）。。仍然..第二个在第一个之前被调用…这东西让我头疼：（谢谢Julian:）很快就有了..仅在尝试foreach:通过数据：无法处理绑定时出错“foreach:函数（）{return contacts}”消息：无法处理绑定“text:函数（）{return DepartmentName}”“信息：部门名称未定义我做了一个小动作。。真实数据以json字符串表示，但我无法使其正常工作（由于不详细：）@TerjeNygård抱歉延迟，今天是美国的假日。我已经对你的JSFIDLE进行了讨论，并注意到了一些小问题。你真的很接近。这是一个有效的版本：非常感谢朱利安：）