将jsRender模板存储在单独的js文件中


Store a jsRender template in a separate js file

是否可以将jsRender模板存储在单独的文件中？

我想将其存储在单独的文件中，并在页面中对其进行引用。

像这样的东西

1
<script id="templateName" type="text/x-jsrender" src="thisIsTheTemplate.js">

我将不胜感激任何建议或建议。

谢谢

相关讨论

是的，您可以完成此操作(我每次都使用此功能)。

假设您的模板位于template文件夹中，并且被称为，例如_productDetails.tmpl.html

在页面中，您使用jQuery $.get()将其拉出并加载到模板中，例如：

1
2
3
4
5
6
7
8
9
var renderExternalTmpl = function(item) {

    var file = '../templates/_' + item.name + '.tmpl.html';
    $.when($.get(file))
     .done(function(tmplData) {
         $.templates({ tmpl: tmplData });
         $(item.selector).html($.render.tmpl(item.data));
     });    
}

然后传递一个对象item，女巫将包含所有3个属性，例如：

1
renderExternalTmpl({ name: 'productDetails', selector: '#items', data: {} })

您可以拥有一个不错的实用程序类来保存所有这些内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var my = my || {};
my.utils = (function() {
    var getPath = function(name) {
        return '../templates/_' + name + '.tmpl.html';
    },
    renderExtTemplate = function(item) {

        var file = getPath( item.name );
        $.when($.get(file))
         .done(function(tmplData) {
             $.templates({ tmpl: tmplData });
             $(item.selector).html($.render.tmpl(item.data));
         });    
    };

    return {
        getPath: getPath,
        renderExtTemplate: renderExtTemplate
    };
});

您可以轻松地致电my.utils.renderExtTemplate(item);

相关讨论