18

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

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

像这样的东西

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

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

谢谢

4

5 回答 5

21

是的，你可以做到这一点（我每次都用这个）。

假设您将模板放在一个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);

于 2012-05-14T08:26:08.883 回答
2

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

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

该库与 jsRender 以及任何能够处理模板的代码一起使用。

享受！

于 2012-09-12T15:29:55.710 回答
2

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

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.'
        });
    });
});
于 2017-06-02T12:07:39.533 回答
1

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

使用$.ajax(), 并设置async: trueand dataType: text，否则会报错：elem.getAttribute is not a function. 有关详细信息，请参阅我对通过 AJAX 加载 jsrender 模板时的错误的回答。

于 2012-11-29T23:04:24.877 回答
0

以我的经验，你不需要处理这个麻烦，你只需要在使用之前将模板附加到页面上。见下面的代码。

<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文件了

于 2016-11-16T02:43:29.403 回答