1

レポートのセクションをロードする関数があります。

// function to load section 
function loadSection(sectionId) {

    $.when(

        // Now load the specified template into the $overlay.
        loadTemplate(sectionId),

        // After the template is in place we need to identify all
        // the editable areas and load their content.
        loadEditables(sectionId)

    )
    .then(function () {

        // Now find all section link elements and wire them up.
        buildSectionLinks(),

        // Find all hover elements and attach the hover handlers.
        loadHovers()

    });

}

テンプレートをロードしてから、テンプレートを繰り返し処理して、テンプレート内のユーザー提供のコンテンツ領域であるすべての「編集可能」を見つけるという考え方です。テンプレートとすべての編集可能要素が読み込まれると、マークアップに対していくつかの処理を実行して、クリックイベントを特定の要素に結び付けるなどの処理を実行します。すべてのテンプレートと編集可能なajax呼び出しは、処理が行われる前に終了する必要があります。

私はajax呼び出しを1回しか行っていないので、への呼び出しはloadTemplate(sectionId)問題なく機能します。jQuery.when

// This function goes out to an AJAX endpoint and gets the specified
// report template and appends it to the overlay DIV.
function loadTemplate(sectionId) {
    return $.ajax({
        url: settings.templateUrl,
        data: { sectionId: sectionId },
        type: 'post',
        success: function (template) {
            $overlay.append(template);
        }
    });
}

すべての編集可能なものをループして、それぞれに対してajax呼び出しを実行する必要があるため、このloadEditables(sectionId)関数の実装はそれほど簡単ではありません。

// This function loads content for all editables defined in the template.
function loadEditables(sectionId) {
    // Grab all editables into a jQuery wrapped set.
    var $editables = $('#template .editable');

    // Loop through each editable and make an AJAX call to load its content.
    $editables.each(function () {
        var $editable = $(this);

        $.ajax({
            type: 'post',
            url: settings.editableUrl,
            data: {
                sectionId: sectionId,
                editableIndex: $editable.data('editableindex')
            },
            success: function (editable) {
                if (editable.hasData)
                    $editable.html(editable.content);
            }
        });
    });
}

でloadTemplate私は関数で簡単return $.ajax(...)に満たすことができました$.when(...)。ここでは、ラップされたセットをループして、セット内の各要素に対して新しいajax呼び出しを実行しています。処理関数（buildSectionLinks()およびloadHovers()）を起動する前に、これらすべての呼び出しが実行されていることを確認するにはどうすればよいですか？

4

2 に答える 2

4

promise オブジェクトを配列に格納し、その配列を$.whenusingに渡します.apply

function loadEditables(sectionId) {
    // Grab all editables into a jQuery wrapped set.
    var $editables = $('#template .editable'),
        defArr = [];

    // Loop through each editable and make an AJAX call to load its content.
    $editables.each(function () {
        var $editable = $(this);

        defArr.push($.ajax({
            type: 'post',
            url: settings.editableUrl,
            data: {
                sectionId: sectionId,
                editableIndex: $editable.data('editableindex')
            },
            success: function (editable) {
                if (editable.hasData)
                    $editable.html(editable.content);
            }
        }));
    });
    return $.when.apply($,defArr);
}
于 2012-10-17T21:29:25.980 に答える
4

各オブジェクトを配列に書き込み.promise、その配列を返す必要があります。関数の外では、.when() with.apply()` を呼び出して適切に呼び出すことができます。

function loadEditables(sectionId) {
// Grab all editables into a jQuery wrapped set.
    var $editables = $('#template .editable'),
        promises = [ ];

    // Loop through each editable and make an AJAX call to load its content.
    $editables.each(function () {
        var $editable = $(this);

        promises.push($.ajax({
            type: 'post',
            url: settings.editableUrl,
            data: {
                sectionId: sectionId,
                editableIndex: $editable.data('editableindex')
            },
            success: function (editable) {
                if (editable.hasData)
                    $editable.html(editable.content);
            }
        }));
    });

    return promises;
}

そして、私たちは次のように行きます

$.when.apply( null, loadEditables() ).done(function() {
});
于 2012-10-17T21:29:56.913 に答える