下划线中的外部模板

我使用Underscore模板。是否可以将外部文件作为模板？

在骨干视图中，我有：

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

在我的html中是：

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

它运作良好。但是我需要外部模板。我尝试：

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

要么

textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),

要么

$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })

但它没有用。

编辑：这个答案是旧的和过时的。我将其删除，但这是“已接受”的答案。我会发表我的意见。

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

我喜欢使用grunt任务（grunt-contrib-jst）将所有HTML模板编译为一个template.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。

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

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 3Dave Robinson的回答，究竟是什么会导致“ HIERARCHY_REQUEST_ERR：DOM异常3”错误？。

基本上，您必须添加

dataType: 'html'

到$ .ajax请求。

这个mixin允许您以非常简单的方式使用Underscore渲染外部模板_.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());

在我的骨干网视图中。

这可能与主题不符，但是您可以使用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文件（基本上是javascript中Grunt项目的配置文件）中定义的文件的更改。 ）。如果您不寒而栗，请键入以下命令为您启动此任务：

grunt watch

从命令行，Grunt将监视您对文件所做的所有更改，并在检测到更改后自动执行在该grunt.js文件中为此文件设置的所有任务，例如上述的jst任务。编辑然后保存文件，即使所有模板分散在多个目录和子目录中，所有模板也会重新编译为一个js文件。

可以配置类似的任务来添加javascript，运行测试，连接和缩小/丑化脚本文件。而且所有操作都可以与监视任务联系在一起，因此对文件的更改将自动触发项目的新“构建”。

花费一些时间进行设置并了解如何配置grunt.js文件，但这很值得，值得花时间投入，而且我认为您永远都不会回到预先准备好的工作方式

我认为这可能对您有帮助。解决方案中的所有内容都围绕着require.js库，该库是一个JavaScript文件和模块加载器。

上面链接上的教程很好地展示了如何组织骨干项目。一个简单的实现也被提供。希望这可以帮助。

我对javascript模板很感兴趣，现在我开始着手骨干。这是我想出的，并且似乎工作得很好。

window.App = {

    get : function(url) {
        var data = "<h1> failed to load url : " + url + "</h1>";
        $.ajax({
            async: false,
            url: url,
            success: function(response) {
                data = response;
            }
        });
        return data;
    }
}

App.ChromeView = Backbone.View.extend({
    template: _.template( App.get("tpl/chrome.html") ),
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
});

App.chromeView = new App.ChromeView({ el : document.body });
App.chromeView.render();

我必须将数据类型设置为“文本”以使其对我有用：

get : function(url) {
    var data = "<h1> failed to load url : " + url + "</h1>";
    $.ajax({
        async: false,
        dataType: "text",
        url: url,
        success: function(response) {
            data = response;
        }
    });
    return data;
}

我找到了一个适合使用jQuery的解决方案。

我将带有jQuery.load（）方法的下划线模板代码添加到主html文件中。

一旦存在，我就用它来生成模板。所有需要同步发生！

这个概念是：

我有一个下划线地图模板代码：

<!-- MAP TEMPLATE-->
<script type="text/template" id="game-map-template">
    <% _.each(rc, function(rowItem, index){ %>
      <ul class="map-row" data-row="<%- index %>">
        <li class="map-col <%- colItem.areaType ? 'active-area' : '' %>"></li>
        ...
</script>

然后将代码放在名为map-template.html的文件中

之后，我为模板文件创建一个包装器。

<div id="templatesPool"></div>

然后像这样将文件包含在我的主要html文件中。

在头上：

<!-- Template Loader -->
<script> 
    $(function(){
      $("#templatesPool").append($('<div>').load("map-template.html")); 
    });
</script> 

干杯。

我知道这个问题确实很老，但是它是Google搜索下划线ajax模板的第一个结果。

我厌倦了没有找到一个好的解决方案，所以我创建了自己的解决方案：

https://github.com/ziad-saab/underscore-async-templates

除了使用AJAX加载下划线模板外，它还添加了<％include％>功能。我希望它对某人有用。

我强迫jQuery同步运行有点不安，因此我使用了promises修改了前面的同步示例。几乎相同，但异步运行。在此示例中，我使用的是hbs模板：

var asyncRenderHbs= function(template_name, template_data) {
    if (!asyncRenderHbs.template_cache) { 
        asyncRenderHbs.template_cache= {};
    }

    var promise= undefined;

    if (!asyncRenderHbs.template_cache[template_name]) {
        promise= new Promise(function(resolve, reject) {
            var template_url= '/templates/' + template_name;
            $.ajax({
                url: template_url,
                method: 'GET',
                success: function(data) {
                    asyncRenderHbs.template_cache[template_name]= Handlebars.compile(data);
                    resolve(asyncRenderHbs.template_cache[template_name](template_data));
                },
                error: function(err, message) {
                    reject(err);
                }           
            });
        });
    } else {
        promise= Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
    }

    return promise;
};

然后使用呈现的html：

asyncRenderHbs('some_template.hbs', context)
    .then(function(html) {
        applicationMain.append(html);
        // Do other stuff here after html is rendered...
    })
    .catch(function(err) {
        // Handle errors
    });

注意：正如其他人所讨论的那样，最好将所有模板编译成一个templates.js文件并在开始时进行加载，而不是在加载网页时进行许多小的同步AJAX调用来获取模板。

前方警告-这是巨龙：

我提到下面显示的方法，只是为了帮助那些努力使ASP.NET堆栈（和类似框架）与js-lib生态系统和谐地工作的人。毋庸置疑，这不是通用解决方案。话说回来 ...

/ endforwardwarning

如果您使用的是ASP.NET，则只需将模板放在一个或多个自己的部分视图中即可将其外部化。也称为.cshtml：

  @Html.Partial("path/to/template")

在template.cshtml内部：

   // this is razorview and thusly if you ever need to use the @ character in here  
   // you will have to either escape it as @@ or use the html codepoint which is &#64
   // http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
   <script type="text/x-template" id="someId">
        <span class="foo"><%= name %></span>
   </script>

现在您可以像往常一样使用模板：

  _.template($("#someId").html())({ name: "Foobar" });

希望这种难以捉摸的方法可以帮助某人节省一个小时的时间。