1

テンプレート メソッドを介して挿入する HTML 文字列を取得するクリック ハンドラーがあります。現時点では、コールバックから HTML 文字列を非同期に返すことはできませんが、jQuery defered を使用すれば、これを実現できる可能性があると聞きました。ただし、それらを読んだ後、どのように構成するかはまだわかりません。

これが私のコードの簡略版です：

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();
    },

}
4

1 に答える 1

0

あなたの$.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が独自の遅延オブジェクトを返すようにさらに変更することもできます。

于 2012-10-31T14:43:45.813 に答える