Underscore 中的外部模板

Question

我使用下划线模板。可以附加外部文件作为模板吗？

在主干视图中，我有：

 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 ) })

但它不起作用。

Answer 1

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

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 文件中
   dir
2. 是非常轻量级的
3. ，编译和缓存模板，
4. 抽象模板加载逻辑。例如，将来您可以使用预加载和预编译的模板。
5. 易于使用

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

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

基本上，您必须添加

dataType: 'html'

到 $.ajax 请求。

Answer 2

编辑：这个答案已经过时了。我会删除它，但这是“已接受”的答案。我会提出我的意见。

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

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

下面的所有内容都是垃圾

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

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

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

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

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

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

使用这种方法可以避免在确实没有必要的地方引入 require.js 。

Answer 3

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

Answer 4

我不想使用 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 视图中使用的那样。

Answer 5

这可能有点偏离主题，但您可以使用 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 之前的工作方式

Answer 6

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

上面链接中的教程很好地展示了如何组织骨干项目。还提供了示例实现。希望这有帮助。

Answer 7

我对 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();

Answer 8

我必须将数据类型设置为“文本”才能使其适合我：

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;
}

Answer 9

我找到了一个适合我的使用 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>

我将该代码放入名为ma​​p-template.html的文件中，

然后为模板文件创建一个包装器。

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

然后我将该文件包含在我的主 html 文件中，如下所示。

心里：

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

干杯。

Answer 10

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

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

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

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

Answer 11

我对强制 jQuery 同步运行感到有点不安，所以我使用 Promise 修改了前面的同步示例。它几乎相同，但异步运行。我在这个例子中使用 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 调用获取模板。

Answer 12

转发警告 - 这里是龙：

我提到下面所示的方法只是为了帮助那些努力使 ASP.NET 堆栈（和类似框架）与 js-libs 生态系统和谐工作的人。不用说，这不是一个通用的解决方案。话虽如此...

/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 @
   // 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" });

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