Question

我正在尝试使用jQuery加载一些小的.html文件，并在执行某段代码之前将它们全部放入DOM中。但事实证明这非常困难。我可以让它做得很好，但是我试图让它处理倍数只是不起作用，我无法理解为什么。

这是可以执行一个文件的代码。

var templates = (function ($, host) {
    // begin to load external templates from a given path and inject them into the DOM
    return {
        // use jQuery $.get to load the templates asynchronously
        load: function (url, target, event) {
            var loader = $.get(url)
                .success(function (data) {
                    // on success, add the template to the targeted DOM element
                    $(target).append(data);
                })
                .error(function (data) {

                })
                .complete(function () {
                    $(host).trigger(event, [url]);
                });
        }
    };
})(jQuery, document);

使用如下;

templates.load("file1.html",
    "#templates-container", "file1-loaded");


$(document).on("file1-loaded", function (e) {
    // execute the rest of the page
});

如果我需要加载多个文件，这会失败。所以我尝试了这个......

(function ($, host) {
    $.fn.templates = function (options) {
        var settings = $.extend({
            queue: [],
            element: this,
            onLoaded: function () { }
        }, options);

        this.add = function (url) {
            settings.queue.push(url);
            return settings.element;
        }

        this.load = function () {
            $.each(settings.queue, function (index, value) {
                $.get(value).success(function (data) {
                    $(settings.element).append(data);
                });
            });

            settings.onLoaded.call();
        }

        return settings.element;
    }
})(jQuery, document);

这打算像这样工作......

$('#templates-container').templates({
    onLoaded: function () {
        // execute the rest of the code
    }
}).add('file1.html').add('file2.html').done();

但它完全失败了，它没有给我任何关于原因的迹象。我甚至没有收到错误消息。但onLoaded永远不会被正确调用。

Answer 1

这是一个将数组发送到loader函数的解决方案，将每个请求的承诺推送到数组中，然后当使用$.when解析整个promise数组时，您的事件将被触发

var templates = (function ($, host) {
    // begin to load external templates from a given path and inject them into the DOM
    return {
        // use jQuery $.get to load the templates asynchronously
        load: function (templateArray, target, event) {
            var defferArray = [];
            $.each(templateArray, function (idx, url) {
                var loader = $.get(url)
                    .success(function (data) {
                    // on success, add the template to the targeted DOM element
                    $(target).append(data);
                })
                defferArray.push(loader);
            })

            $.when.apply(null, defferArray).done(function () {
                $(host).trigger(event);
            });
        }
    };
})(jQuery, document);

$(document).on("files-loaded", function () {
    $("#content").append("<p>All done!</p>");
})


$(function () {
    var templateArray = ["file1.html", "file2.html"]
    templates.load(templateArray, "#content", "files-loaded");
});

的 DEMO

jQuery：加载多个外部html文件很困难

1 个答案: