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

Question

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

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

类似这样的事情

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

我会感谢任何意见或建议。

谢谢

Answer 1

是的，你可以完成这个(我每次都使用这个)。

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

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

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 个属性，例如:

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

你可以有一个很好的实用程序类来保存所有这些:

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