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

Answer 2

我最近遇到了这个问题。在查看了jsRender代码并研究其他javascript库之后，我决定编写自己的库来简化加载外部模板，以便可以使用<link>标记将模板附加到html页面，并通过简单地包含它们来呈现它们.js文件。如果您想查看它，我已经在github上发布了代码并附带了示例：

https://github.com/stevenmhunt/tmpl.loader

此库适用于jsRender，以及任何能够处理模板的代码。

享受！

Answer 3

这是我写的一次加载一个或多个外部模板的函数。它还会缓存模板，因此如果已经加载了模板，则不会再次加载。

function loadTemplates() {
    var toLoad = [],
        loadAll = $.Deferred();

    $.each(arguments, function(i, templateName) {
        var filepath = '/path/to/templates/' + templateName + '.html',
            loadTemplate = $.Deferred();

        toLoad.push(loadTemplate);

        if ($.templates[templateName]) {
            loadTemplate.resolve();
        } else {
            $.get(filepath , function(html) {
                var newTemplate = {};
                newTemplate[templateName] = html;
                $.templates(newTemplate);
            }).fail(function() {
                throw 'Could not load template at '+filepath;
            }).done(function() {
                loadTemplate.resolve();
            });
        }
    })

    $.when.apply($, toLoad).done(function() {
        loadAll.resolve();
    });

    return loadAll;
}

像这样使用它：

loadTemplates('modal','itemDetail', 'itemsList').done(function() {
    // do stuff when all templates are loaded
    $('#viewItemDetail').on('click',function() {
        $.render.itemDetail({
            id:'123',
            name:'Cool Thing',
            description:'This thing is really cool.'
        });
    });
});

Answer 4

如果您尝试从本地文件加载外部模板，就像我一样，让我为您节省一些挫折感。不要按照 balexandre 的回答中的建议使用jQuery $.get()。

使用$.ajax()，设置async: true和dataType: text，否则会出错：elem.getAttribute is not a function。有关详细信息，请参阅我对Error when loading jsrender templates through AJAX的回答。

Answer 5

根据我的经验，您不需要解决这个问题，只需在使用之前将模板附加到页面即可。见下面的代码。

<div id="all_template"></div>
<script>
var file = '/tmpl/all.tmpl.html';
$.ajax({
    url: file,
    async: false,
    type : "GET",
    dataType: 'text',
    cache: true,
    success: function(contents) 
    {
    $("#all_template").append(contents);//append all your template to the div
    }
});
</script>
<script>
var data = {};
$('#js-template').render(data);//use it as the same old way
</script>

这样，每次要渲染js模板时都不需要请求ajax文件

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

5 个答案: