jQuery цепочки .load () запросов?

Question

Итак, я только что работал с jQuery .load () , и похоже, что мы не можем настроить $("#example").load('./uri.ext #ID') для такой цепочки:

$("#example").load('./uri.ext #ID1').load('./uri.ext #ID2').load('./uri.ext #ID3')

Что, конечно, было бы полезно, если бы у нас был файл шаблона DIVs или что-то для динамического построения страницы, а не для хранения HTML в строковой переменной или что-то в том же духе ... плюс, мы могли бы сохранить несколько из них водин файл.

В идеале я хотел бы вложить такие вещи с помощью этой команды:

<div id="example">
    <div id="ID1">
        <div id="ID2">
            <div id="ID3">
            </div>
        </div>
    </div>
</div>

Проблемы, которые я получаю, имеют две стороны.Во-первых, свойство async : true запроса вызывает следующий запрос, и размещение не выполняется предварительно, как задумано.Затем я попытался запустить вложенный $ ("# example"). Load ('./ uri.ext # ID1'). AjaxCompletes (function () {/ next .load () в последовательности /}) `которая закончилась рекурсивной ловушкой, которая не заканчивалась и продолжала посылать запросы на эти файлы.

Есть мысли о том, как выполнить то, что я ищу, с помощью синтаксиса / метода, как я пытался?Кроме того, если это не проблема, а просто недоразумение с моей стороны в цепочке jQuery, объяснение, я был бы очень благодарен за любое объяснение этого.

Answer 1

Для достижения этой цели вам потребуется вложить их в функции обратного вызова:

$('#example').load('./uri.ext #ID1', function() {
  $('#ID1').load('./uri.ext #ID2', function() {
    $('#ID2').load('./uri.ext #ID3', function() {
      // load successful
    });
  });
});

РЕДАКТИРОВАТЬ для ES6 Стандарты:

 $('#example').load('./uri.ext #ID1', () => {
      $('#ID1').load('./uri.ext #ID2', () => {
        $('#ID2').load('./uri.ext #ID3', () => {
          // load successful
        });
      });
    });

Answer 2

Поднял вопрос и ответ.

Я предоставляю немного более элегантное решение с использованием рекурсивного вызова на тот случай, если другие захотят использовать его. Обратите внимание, что это не отвечает непосредственно на контекст исходного вопроса. Это в контексте моего собственного решения, но идея та же.

var App = App || {};

App.Quiz = (function ($) {
    "use strict";

    var _templates = [{ target: "#quiz_main_template", url: "/UserControls/Quiz/Quiz_Main.tmpl.htm" },
        { target: "#quiz_media_left_template", url: "/UserControls/Quiz/Quiz_Media_Left.tmpl.htm" },
        { target: "#quiz_media_right_template", url: "/UserControls/Quiz/Quiz_Media_Right.tmpl.htm" },
        { target: "#quiz_no_media_template", url: "/UserControls/Quiz/Quiz_No_Media.tmpl.htm" }]

    function loadTemplates(templates, callback) {
        if (templates.length) {
            var nextTemplate = templates.pop();
            $(nextTemplate.target).load(nextTemplate.url, loadTemplates(templates, callback));
        } else {
            callback.call();
        }
    }

    function init() {
        loadTemplates(_templates, function () { alert("Done!");})
    }

    return {
        init: init
    };
})(jQuery);

$(function () {
    App.Quiz.init();
});