一次加载所有模板

Question

以下代码加载模板。

tpl = {

    // Hash of preloaded templates for the app
    templates: {},

    // Recursively pre-load all the templates for the app.
    // This implementation should be changed in a production environment. All the template files should be
    // concatenated in a single file.
    loadTemplates: function(names, callback) {

        var that = this;

        var loadTemplate = function(index) {
            var name = names[index];
            console.log('Loading template: ' + name);
            $.get('tpl/' + name + '.html', function(data) {
                that.templates[name] = data;
                index++;
                if (index < names.length) {
                    loadTemplate(index);
                } else {
                    callback();
                }
            });
        }

        loadTemplate(0);
    },

    // Get template by name from hash of preloaded templates
    get: function(name) {
        return this.templates[name];
    }

};

你可以加载像

这样的模板

tpl.loadTemplates(['header', 'wine-details', 'wine-list-item'], function() {

});

但是这里的模板是在单独的 html 文件中定义的。

是否有可能我的所有模板都定义在一个 html 文件中，然后我将它们全部加载在一起。 我是否需要编写某种解析器。原因是我的主页有 40 个模板，我不想创建 40 个 Html 模板页面，而是我可以将它们保存在一个 html 页面中，而不是一起加载它们。

这可能吗？

Answer 1

是的，你不需要这样做。

检查这个：https://github.com/requirejs/text

define([
    'some/module',
    'text!some/module.html',
    'text!some/module.css'
], function (SomeModule, HtmlFile, CssFile) {
    'use strict';

    // ....
}

这可以加载文本资源。当您准备好部署您的应用程序时，您可以使用 r.js 将所有 js 文件和模板编译成单个缩小文件。您可以通过命令行或作为 grunt 或 gulp 任务执行此操作。

有很多模板库，你可以找到 requirejs 插件（通常是从文本插件扩展而来的 ^^）。例如，这个用于 Handlebars https://github.com/jfparadis/requirejs-handlebars 或这个用于下划线 https://github.com/jfparadis/requirejs-tpl。只需谷歌搜索“requirejs «模板引擎名称»”。

---

如果您想在一个 html 文件中包含多个模板，您需要一种方法来分隔它们。最好的方法是使用新的template 标签。

Answer 2

您可以使用 Ids 在不同的容器下定义模板单个文件。以您在此处加载的方式加载单个 html，使用模板 html 创建一个 jquery 节点，运行子项读取 id 属性并将每个子项的 html 保存为that.templates[id_you_read] = child.html();

但这不是正确的做事方式。如上一个答案所示，将 requirejs 与文本插件一起使用。