Question

我有一个带下拉列表的表单，页面使用Knockout JS将数据绑定到html元素我有以下代码来预先填充数据库中的值。

JS

    self.Irr = ko.observableArray([]);

    self.Crp = ko.observableArray([]);

    self.Incr = ko.observableArray([]);

    self.Brnd = ko.observableArray([]);

    self.Sec4 = ko.observableArray([]);

    $.getJSON("GetIrr", null, function (data) { self.Irr(data); })
        .done(function () {
            $.getJSON("GetCrp", null, function (data) { self.Crp(data); });
        })
        .done(function () {
            $.getJSON("GetTill", null, function (data) { self.Sec4(data); });
        })
        .done(function () {
            $.getJSON("GetBrnd", null, function (data) { self.Brnd(data); });
        })
        .done(function () {
            $.getJSON("GetIncr", null, function (data) { self.Incr(data); });
        })
        .done((function () {
            var request = $.ajax({
                type: "POST",
                dataType: 'json',
                url: "UserSavedData",
                data: { "InfoVal": $("#infoID").val() }
            });


            request.success(function (result) {

    // here i use the result data to get ids of the dropdown values and
    //fill the form

}

来自observable数组的数据没有被填充（无法分配结果id对象因为getjson respnonse需要更多时间来加载我猜）由于$ getJSON调用的网络时间如何处理这个

根据建议我使用 then（）而不是 done（），但仍然遇到数据无法加载的问题（一个字段不能当我在chrome中放置一个断点和调试时，populate会显示，但是当没有调试时它不显示值）

Answer 1

如果您希望您的承诺按顺序链接，则需要使用.then()方法，并确保从成功处理程序返回任何新的承诺，以使它们可链接。

$.getJSON('first')
  .then(function(){
     return $getJSON('second');
   })
   .then(function(){
     return $.getJSON('third');
   });

现在，您的代码将在第一次通话完成后立即全部运行。＃34;完成＆＃34;因为你并没有真正将这些承诺联系在一起，所以你只是在第一个承诺中加入了一堆成功的处理程序。

下面是一个示例，它显示了两种方法之间的区别。

＆＃13;

(function(){

  function sayHelloAsync(msg){
    var def = jQuery.Deferred();
    
    setTimeout(function(){
      $("<div>" + msg + "</div>").appendTo("#messages");
      def.resolve();
    }, getRandomInt(300, 1500));
    
    return def.promise();
  }
  
  function clearMessages(){
    $("#messages").html('');
  }
  
  function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
  
  function allAtOnce(){
    clearMessages();
    
    sayHelloAsync("first")
    .done(function(){
      sayHelloAsync("second");
    })
  .done(function(){
      sayHelloAsync("third");
    })
  .done(function(){
      sayHelloAsync("fourth");
    });
  }
  
  function ordered(){
    clearMessages();
    
    sayHelloAsync("first")
    .then(function(){
      return sayHelloAsync("second");
    })
  .then(function(){
      return sayHelloAsync("third");
    })
  .then(function(){
      return sayHelloAsync("fourth");
    });
  }

  $("#allAtOnce").on('click', allAtOnce);
  $("#ordered").on('click', ordered);
  
}());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="allAtOnce" type="button">All At Once</button>
<button id="ordered" type="button">Ordered</button>
<h2>Messages</h2>
<div id="messages">
</div>

＆＃13;

Answer 2

+1乔希。

更多的Knockout-y方法是将每个observable subscribe赋予它所依赖的observable（注意你可以将observableArray作为成功函数传递，你不需要包装它）。

self.Irr = ko.observableArray([]);
self.Crp = ko.observableArray([]);
self.Incr = ko.observableArray([]);
self.Brnd = ko.observableArray([]);
self.Sec4 = ko.observableArray([]);

$.getJSON("GetIrr", null, self.Irr);
self.Irr.subscribe(function () {
    $.getJSON("GetCrp", null, self.Crp);
});
self.Crp.subscribe(function () {
    $.getJSON("GetTill", null, self.Sec4);
});

等

从$ getJSON加载下拉列表值

2 个答案: