下划线中的外部模板

javascript underscore.js backbone.js

2022-08-30 05:02:37

我使用下划线模板。是否可以将外部文件附加为模板？

在主干视图中，我有：

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

但它不起作用。

答案 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”并不是一个坏方法，因为在任何情况下，你都必须等到模板被加载。

所以，“渲染”功能

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

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

如果模板没有显示在本机应用程序中，并且您看到，请查看Dave Robinson的答案，究竟是什么会导致“HIERARCHY_REQUEST_ERR：DOM异常3”-错误？。HIERARCHY_REQUEST_ERROR: DOM Exception 3

基本上，您必须添加

dataType: 'html'

到 $.ajax 请求。

答案 2

编辑：这个答案很旧，过时了。我会删除它，但它是“接受”的答案。我会注入我的意见。

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

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

下面的一切都是垃圾

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

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

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

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

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

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

使用这种方法可以避免在真正没有必要的地方.js需要时进行腌制。