这是一个简单的解决方案：

var rendered_html = render('mytemplate', {});

function render(tmpl_name, tmpl_data) {
    if ( !render.tmpl_cache ) { 
        render.tmpl_cache = {};
    }

    if ( ! render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = '/static/templates';
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';

        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType: 'html', //** Must add 
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });

        render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return render.tmpl_cache[tmpl_name](tmpl_data);
}

在这里使用 "async: false" 并不是一个坏方法，因为在任何情况下你都必须等到模板被加载。

所以，“渲染”功能

1. 允许您将每个模板存储在静态目录中的单独 html 文件中
2. 非常轻巧
3. 编译和缓存模板
4. 抽象模板加载逻辑。例如，将来您可以使用预加载和预编译的模板。
5. 易于使用

[我正在编辑答案而不是发表评论，因为我认为这很重要。]

如果模板未显示在本机应用程序中，并且您看到了HIERARCHY_REQUEST_ERROR: DOM Exception 3，请查看 Dave Robinson 对什么会导致“HIERARCHY_REQUEST_ERR：DOM 异常 3”-错误的回答？.

基本上，您必须添加

dataType: 'html'

到 $.ajax 请求。

编辑：这个答案是旧的和过时的。我会删除它，但它是“已接受”的答案。我来发表一下我的看法。

我不会再提倡这样做了。相反，我会将所有模板分成单独的 HTML 文件。有些人会建议异步加载这些（Require.js 或各种模板缓存）。这在小型项目上效果很好，但在包含大量模板的大型项目中，您会发现自己在页面加载时发出了大量的小异步请求，我真的很不喜欢。（呃……好吧，你可以通过使用 r.js 预编译你的初始依赖来解决它，但对于模板，这对我来说仍然是错误的）

我喜欢使用 grunt 任务 (grunt-contrib-jst) 将所有 HTML 模板编译为单个 templates.js 文件并将其包含在内。你得到了世界上最好的 IMO...模板存在于一个文件中，所述模板的编译发生在构建时（而不是运行时），并且在页面启动时你没有一百个微小的异步请求。

下面的都是垃圾

对我来说，我更喜欢在我的模板中包含一个 JS 文件的简单性。因此，我可能会创建一个名为 view_template.js 的文件，其中包含模板作为变量：

app.templates.view = " \
    <h3>something code</h3> \
";

然后，就像包含普通脚本文件一样简单，然后在您的视图中使用它：

template: _.template(app.templates.view)

更进一步，我实际上使用了 coffeescript，所以我的代码实际上看起来更像这样并且避免了行尾转义字符：

app.templates.view = '''
    <h3>something code</h3>
'''

使用这种方法可以避免在真正不需要的地方引入 require.js。

这种混入可以渲染使用外部模板下划线以非常简单的方式：_.templateFromUrl(url, [data], [settings])。方法 API 几乎与Underscore的 _.template() 相同。包括缓存。

_.mixin({templateFromUrl: function (url, data, settings) {
    var templateHtml = "";
    this.cache = this.cache || {};

    if (this.cache[url]) {
        templateHtml = this.cache[url];
    } else {
        $.ajax({
            url: url,
            method: "GET",
            async: false,
            success: function(data) {
                templateHtml = data;
            }
        });

        this.cache[url] = templateHtml;
    }

    return _.template(templateHtml, data, settings);
}});

用法：

var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});

我不想将 require.js 用于这个简单的任务，所以我使用了修改后的 koorchik 的解决方案。

function require_template(templateName, cb) {
    var template = $('#template_' + templateName);
    if (template.length === 0) {
        var tmpl_dir = './templates';
        var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
        var tmpl_string = '';

        $.ajax({
            url: tmpl_url,
            method: 'GET',
            contentType: 'text',
            complete: function (data, text) {
                tmpl_string = data.responseText;
                $('head').append('<script id="template_' + templateName + '" type="text/template">' + tmpl_string + '<\/script>');
                if (typeof cb === 'function')
                    cb('tmpl_added');
            }
        });
    } else {
        callback('tmpl_already_exists');
    }
}

require_template('a', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'a' rendering
    }
});
require_template('b', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'b' rendering
    }
});

为什么要将模板附加到文档，而不是将它们存储在 javascript 对象中？因为在生产版本中，我想生成包含所有模板的 html 文件，所以我不需要进行任何额外的 ajax 请求。同时我不需要在我的代码中进行任何重构，因为我使用

this.template = _.template($('#template_name').html());

在我的 Backbone 视图中。

这可能有点偏离主题，但您可以使用 Grunt (http://gruntjs.com/) - 它在 node.js（http://nodejs.org/，可用于所有主要平台）上运行从命令行。这个工具有很多插件，比如模板编译器，https://npmjs.org/package/grunt-contrib-jst。请参阅 GitHub 上的文档，https://github.com/gruntjs/grunt-contrib-jst。（您还需要了解如何运行节点包管理器https://npmjs.org/。别担心，它非常简单且用途广泛。）

然后，您可以将所有模板保存在单独的 html 文件中，运行该工具以使用下划线预编译它们（我认为这是 JST 插件的依赖项，但不要担心，节点包管理器会自动为您安装依赖项）。

这会将您的所有模板编译为一个脚本，例如

templates.js

加载脚本将设置一个全局 - 默认情况下“JST” - 这是一个函数数组，可以像这样访问：

JST['templates/listView.html']()

这将类似于

_.template( $('#selector-to-your-script-template'))

如果你把那个脚本标签的内容放在 (templates/)listView.html

然而，真正的问题在于：Grunt 附带了一个名为“watch”的任务，它基本上会监视您在本地 grunt.js 文件（基本上是您的 Grunt 项目的配置文件，在 javascript 中）中定义的文件的更改）。如果您有 grunt 为您启动此任务，请键入：

grunt watch

从命令行，Grunt 将监视您对文件所做的所有更改，并在检测到更改时自动执行您在该 grunt.js 文件中为其设置的所有任务 - 就像上面描述的jst任务。编辑然后保存你的文件，你的所有模板重新编译成一个 js 文件，即使它们分布在许多目录和子目录中。

可以配置类似的任务来检查您的 javascript、运行测试、连接和缩小/丑化您的脚本文件。并且所有这些都可以与监视任务相关联，因此对文件的更改将自动触发项目的新“构建”。

设置并了解如何配置 grunt.js 文件需要一些时间，但是非常值得投入时间，而且我认为您永远不会回到 grunt 之前的工作方式