Сохраните шаблон 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);

Answer 2

Я недавно столкнулся с этой проблемой сам. Посмотрев код jsRender и изучив другие библиотеки javascript, я решил написать свою собственную библиотеку, которая упростила бы загрузку внешних шаблонов, чтобы можно было прикреплять шаблоны к html-странице с помощью <link> пометить и визуализировать их, просто включив файл.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

Если вы пытаетесь загрузить внешние шаблоны из локального файла, как я, позвольте мне избавить вас от некоторых неприятностей. Не используйте JQuery $.get() как рекомендовано в ответе Балександра.

использование $.ajax()и установить async: true а также dataType: textв противном случае выдает ошибку: elem.getAttribute is not a function, Смотрите подробности в моем ответе на Ошибка при загрузке шаблонов jsrender через 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>

таким образом, вам не нужно запрашивать ajax-файл каждый раз, когда вы хотите визуализировать шаблон js