AJAX请求返回值后函数已经返回

Question

我有一个淘汰赛绑定到我的功能：

<tr id="toolbarRow" data-bind="foreach: get_tabs()"> 

get_tabs电话load它使用一个Ajax请求来填充departments变量：

get_tabs = function() { 
    load(); 
    return departments; 
}, 

这导致我出现问题，因为get_tabs在departments由load填充之前返回。

这里的load：

load = function() { 
    $.ajax(
      { 
       url: _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?querytext='Department:*" 
        + "*'&selectproperties='Department'&sourceid='B09A7990-05EA-4AF9-81EF-EDFAB16C4E31'&sortlist='Department:ascending'", 
       method: "GET", 
       headers: { 
        "accept": "application/xml", 
       }, 
       success: onSuccess, 
       error: onError 
      } 
     ); 
}, 

onSuccess = function (data) { 
    ...populating departments variable... 
}, 

onError = function (err) { 
    alert("something blew up"); 
}, 

我怎样才能保持get_tabs无法返回，直到我的Ajax请求结束onSuccess事件？

Answer 1

正如评论指出，you can't expect to be able to return data from an AJAX request。通常，您会提供一个回调函数，该函数在检索结果后工作。

使用KnockoutJS时，正确的方法是使用observable array。在viewmodel中声明一个属性为可观察数组，将数据绑定到一些HTML，然后在需要时填充数据。这里有一个简单的例子：

function MyViewModel() { 
    this.departments = ko.observableArray([]); 
    this.load = function() { 
     $.ajax({ 
      /* your AJAX options */ 
     }) 
     .success(this.departmentsLoaded.bind(this)) 
    }; 

    this.departmentsLoaded = function (data) { 
     this.departments(data); 
    }; 
} 

您的视图/标记会是这个样子：

<div data-bind="foreach: departments"> 
    <span data-bind="text: $data"></span> 
</div> 
<button data-bind="click: load">Load</button> 

例子：http://jsfiddle.net/CCNtR/113/

Answer 2

您需要返回departments内onSuccess()功能

onSuccess = function (data) { 
    return departments; 
}, 

Answer 3

你变得温暖。 $ .ajax立即返回。您需要做的是在$ .ajax调用中使用您的成功处理程序对由服务器返回的数据作出反应。

这里是我会做：

get_tabs = function(callback) { 
    load(callback); 
} 
load = function(callback) { 
    $.ajax({ 
     ..., 
     success: function(data) { 
      // populate departments data 
      callback.apply(this, arguments); 
     } 
    }); 
} 

Answer 4

为什么不把部门可观察到的阵列和直接绑定到？不需要回调。你会做这样的事情：

<tr id="toolbarRow" data-bind="foreach: departments"> 

function myViewModel() 
{ 
    var self = this; 

    self.departments = ko.observableArray(); 

    //call the following in your document ready 
    myViewModel.prototype.load = function() 
    { 
     $.ajax(
     { //make your ajax call 


      success: function (result,status,xhr) 
      { 
       ...populating departments variable... 
      } 
     }); 
    } 
} 

$(document).ready(function() 
{ 
    //Toolbar will be empty because departments is empty at this point. 
    ko.applyBindings(myViewModel); 

    //Your onSuccess handler will populate the departments observable array 
    //when it changes, your toolbar will populate. No need for callbacks. 
    myViewModel.load(); 
} 

这真是knockoutjs的妙处在于，你不必担心处理这样的东西......很多;-)