单击时为 .html() 获取延迟的 jQuery答案

【问题标题】：Fetching jQuery deferred for .html() on click单击时为 .html() 获取延迟的 jQuery
【发布时间】：2012-10-31 14:35:33
【问题描述】：

我有一个点击处理程序，它通过模板方法获取要注入的 HTML 字符串。现在它不能从回调中异步返回 HTML 字符串，但我听说如果我使用 jQuery defereds 我可以实现这一点。但是，我仍然不确定在阅读它们之后我会如何构建它。

这是我的代码的简化版本：

var api_response;

var templates = {

    inputSurveyList: function(){

        coApi.get_survey_list(function(data){
            api_response = data;
        });

        var buildSurveyList = function() {
            var element_list = '';
            $.each(api_response, function(index, survey){
                element_list += '<option value="' + survey.survey_id + '">' + survey.name + '</option>\n'
            });
            return element_list
        }

        var template = '<select class="input-survey-list" name="state">\n' + buildSurveyList() + '</select>';
        return template;
    }
}


$(foo).click(function(){
    $(bar).html(templates.inputSurveyList());
})

这就是 API 方法的样子：

var Request = function(method, parameters, callback, errback){
    var self = this;
    this.method = method;
    this.parameters = parameters;
    this.callback = callback;
    this.errback = errback;

    this.send = function(){
        $.ajax({
            dataType: 'json',
            type: 'POST',
            data: JSON.stringify({method: self.method, params: self.parameters}),
            url: '/api',
            success: function(data, textStatus, jqXHR){
                self.callback(data.response);
            },
            error: function(jqXHR, textStatus, errorThrown){
                if (self.errback) {
                    self.errback(ajaxRequest);
                }
            }
        });
    }
}


var coAPI = {
    // Project Calls
    get_survey_list: function(callback, errback){
        var request = new Request('get_survey_list', {}, callback, errback);
        request.send();        
    },
    autocomplete_us_cities: function(term, callback, errback){
        var request = new Request('autocomplete_us_cities', {term: term}, callback, errback);
        request.send();
    },

}

【问题讨论】：

您当前的代码是否有效？它应该会失败，因为在调用 buildSurveyList 时 api_response 仍未定义，除非您使用的是 async:false 而只是不包括它。
正确——它的结构方式失败了，因为它是未定义的。我想知道如何使用 deferreds 使其工作，但不知道如何适应它。

标签： jquery jquery-deferred

【解决方案1】：

你的 $.ajax 需要返回自己，所以return $.ajax({...})，然后在get_survey_list: functi... 中你需要return request.send()

现在你可以这样使用它了：

var templates = {

    inputSurveyList: function(callback){

        if (!callback) return; // if there's no callback, why generate template?

        var api_response = coApi.get_survey_list();

        var buildSurveyList = function(data) {
            var element_list = '';
            $.each(data, function(index, survey){
                element_list += '<option value="' + survey.survey_id + '">' + survey.name + '</option>\n'
            });
            return element_list
        }

        api_response.done(function(data){
            var template = '<select class="input-survey-list" name="state">\n' + buildSurveyList(data) + '</select>';
            callback.call(null,template);
        });
    }
}


$(foo).click(function(){
    templates.inputSurveyList(function(template){
        $(bar).html(template);
    });
});

如果你愿意，你可以进一步修改它，让 inputSurveyList 返回它自己的延迟对象。

【讨论】：