Несколько шаблонов в одном файле JSRender

Я хочу сохранить несколько шаблонов в одном внешнем файле шаблона. Но я не знаю, как получить один шаблон из всего файла


person Ajay Beniwal    schedule 26.01.2013    source источник


Ответы (2)


В вашей коллекции шаблонов должны быть разные теги сценария (как встроенное использование jsRender по умолчанию). Затем вы можете загрузить файл коллекции, найти запрошенную часть и визуализировать ее, должно работать как-то так: (не проверено, просто теоретически)

my.renderUtils = (function () {
  // your template file (contains a set of script tags with ids)
  var templateFile = "template/file.html";
    renderTemplate = function (templateSelector, targetSelector, data) {
      $.get(templateFile, null, function (templateCollection) {
        var template = $(templateCollection).find( templateSelector ), /* find the correct part from the collection */
            tmpl = $.templates(template), /* rendering process */
            htmlString = tmpl.render(data);
        if (targetSelector) {
          $(targetSelector).html(htmlString); /* add it to your target */
        }
        return htmlString;
      });
    };
    return {
      renderExternalTemplate: renderTemplate
    };
})()

// usage 
my.renderUtils.renderExternalTemplate("yourTemplateFilePartID", "#yourTargetSelector", {yourdata:''}});
person axel.michel    schedule 26.01.2013

Есть два варианта. Вот мой старый метод работы (с тех пор от которого я отказался). Это, по сути, то, что Мишель упомянул выше:

$.when( $.get('<%= asset_path('t1.html') %>', null, null, 'html') ).done(function (data, status, jqXHR) {
    // data is a string.  $(data) turns into an array of HTML
    // elements.  Often it is just one but if we get them ganged
    // into one file, they will be more than one.
    $(data).each(function () {
        // We assume the outside element is just a container.  I
        // use a <script> tag but it can be anything I suppose.
        // The id of the container becomes the template's name
        // while the contents becomes the template.
        $.templates(this.id, $(this).html());
        return this;
    });
    $('.upd_apar_defs tbody').html($.render.template1({items: json_elements.items, offset: 0}));
}).fail(function (a, b, c) {
    alert('Someone is really unhappy');
});

Первый аргумент, который нужно получить, — это URL-адрес. Это из проекта Rails с использованием SASS. assets_path превращается в относительный путь к пути t1.html (ни один из которых не имеет отношения к вашему вопросу — я просто объясняю, что делает приведенный выше код).

Я отошел от этого и теперь разделил свои шаблоны на отдельные файлы, а затем объединил их вместе через конвейер ресурсов в Rails. Когда они объединяются вместе, они оборачиваются вызовом $.template, используя имя файла в качестве имени шаблона и содержимое файла в качестве самого шаблона. Примерно я следовал этому:

https://github.com/erubboli/sprockets-jsrender

Я переделал его, но по существу использовал большинство его концепций. Результатом является файл javascript, который вы просто загружаете, и загрузка заставляет его выполняться и определять шаблоны.

Моя логика была такой:

Если вы помещаете несколько шаблонов в один и тот же файл, просто поместите небольшую оболочку вокруг каждого и сделайте файл чистым файлом javascript, даже если он выглядит в основном как html и js-render. Это несложно сделать, редактор справится с этим довольно легко, и относительно ясно, что вы делаете.

Затем вы можете использовать все преимущества чистого файла javascript, такие как загрузка его с помощью тега в голове, кэширование на стороне клиента, сжатие и т. д. Шаблоны готовы к работе во время загрузки страницы. сохранение дополнительной выборки.

ХТН

person pedz    schedule 26.01.2013