3

我正在尝试使用 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 永远不会被正确调用。

4

1 回答 1

1

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

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

于 2013-10-28T23:40:23.203 回答