3

jQuery AJAX API の優れた点を活用し、各 ajax 呼び出しに対して独自のカスタム設定を設定する必要がある場合、アプリは次のようになります。

いくつかの API に対して ajax 呼び出しを行うことによって、テーブル内に従業員情報を表示するページがあるとします。

define(["jQuery"], function($) {
    var infoTable = function (options) {

        function init() {
            // Provide success callback
            options.success_callback = "renderData";
            getData();
        }

        function renderData() {
            // This callback function won't be called as it is not 
            // in global scope and instead $.ajax will try to look 
            // for function named 'renderData' in global scope.
            // How do I pass callbacks defined within requirejs define blocks?
        }

        function getData() {
            $.ajax({
                url: options.apiURL,
                dataType: options.format,
                data: {
                    format: options.format,
                    APIKey: options.APIKey,
                    source: options.source,
                    sourceData: options.sourceData,
                    count: options.count,
                    authMode: options.authMode
                },
                method: options.method,
                jsonpCallback: options.jsonpCallback,
                success: options.success_callback,
                error: options.error_callback,
                timeout: options.timeout
            });
        }
    }

    return {
        init: init
    }
}

どうすればこれを達成できますか?

JSONP リクエストを require 呼び出しとして使用できることはわかっていますが、それでは jsonp の使用、GET リクエストの作成、および $.ajax が提供する他のすべての機能に制限されます。

4

1 に答える 1

5

この例では、デフォルトの成功コールバックを使用するか、次を使用してオーバーライドを提供できます。

success: options.successCallback || renderData

(この例では jsfiddle の残りの URL を使用しています。この事実は重要ではなく、例を短くするためにデータ オブジェクトを取り除いています)

define("mymodule", ["jquery"], function($) {
    function renderData() {
        console.log("inside callback");
    }

    function getData(options) {
        $.ajax({
            url: options.apiURL,
            dataType: options.format,
            method: options.method,
            jsonpCallback: options.jsonpCallback,
            success: options.successCallback || renderData,
            error: null,
            timeout: options.timeout
        });
    }

    return {
        getData: getData
    }
});

require(["mymodule"], function(m) {
    console.log(m, m.getData({
        apiURL: "/echo/json/"
    }));
    console.log(m, m.getData({
        successCallback: function() { console.log("outside callback"); },
        apiURL: "/echo/json/"
    }));
});

印刷します：

GET http://fiddle.jshell.net/echo/json/ 200 OK      263ms
Object { getData=getData()} undefined
GET http://fiddle.jshell.net/echo/json/ 200 OK      160ms
Object { getData=getData()} undefined
inside callback
outside callback
于 2013-09-10T10:11:19.730 に答える