Как я могу представить шаблон jQuery.tmpl в строку?

Question

Документация для jquery.tmpl использует .appendTo для вставки шаблона в DOM во время процесса рендеринга:

$.tmpl( myTemplate, myData ).appendTo( "#target" );

Я пытаюсь преобразовать существующее приложение из другого движка шаблонов и мой кодНужно сначала отобразить шаблон в строку, прежде чем он будет добавлен в DOM.Это возможно?Как это будет сделано?

Answer 1

Ответы здесь не помогли мне, однако ответ Адама поставил меня на правильный путь: любой элемент с jQuery-обёрткой имеет метод .html().

var output = $( "#infoWindowTemplate" ).tmpl( city_data ).html()

или если вам нужен текст ...

var output = $( "#infoWindowTemplate" ).tmpl( city_data ).text()

но учтите, что самый внешний (корневой) элемент шаблона пропущен, поэтому вы должны сделать так, чтобы ваши шаблоны выглядели примерно так:

  <script id='infoWindowTemplate' type='text/x-jquery-tmpl'> 
    <div class='city_info'>
      <h1 class='title'><a href="${link}">${name}</a></h1>
      <p class='meta'>${count} offers</p>
    </div>
  </script> 

или просто используйтеплагина jQuery outerHtml (http://darlesson.com/jquery/outerhtml/) и замените .html() на .outerHTML()

Answer 2

Вы можете сделать это, просто поместив результат во временный контейнер и взяв его изнутри HTML, например:

var str = $("<div />").append($.tmpl(myTemplate, myData)).html();

Answer 3

jQuery.tmpl возвращает HTMLElement, обернутый в объект jQuery, который можно использовать так же, как отображаемые строки в старой системе шаблонов.

var $template = $('#template'),
    html = $.tmpl($template, data).get();

Я подозреваю, что на самом деле это может быть быстреечем обычные строки, но у меня пока нет данных для профилирования.

---

Обновление

Я провел базовое профилирование между Mustache.js и jQuery.tmpl, и статистика выглядит не очень хорошо.

Я начал с 1000 предварительно загруженных записей и сгенерировал шаблоны для них несколько раз, усредняя результаты.

Mustache.js: 1783ms
jQuery.tmpl: 2243ms

Я мог бы подождать, пока jQuery.tmpl не закроет этот пробел, прежде чем переключаться.

Answer 4

jQuery Templating предоставляет $.template() (см. Описание в исходном коде) - возвращает массив строк после оценки кэшированного шаблона с вашими данными.Я пишу с нуля (и из экспериментов в консоли Chrome), но вы поймете всю идею.

1. Создание и кеширование именованной функции шаблона

   $("template-selector").template("template-name");
   

2. Получите функцию шаблона и вызовите ее с вашими данными

   var tmpl = $.template("template-name"); // template function
   var strings = tmpl($, {data: {<your data here>}}); // array of strings
   var output = strings.join(''); // single string
   

Answer 5

Вы можете подготовить данные шаблона, как это var tmplData = {link: "your link", name: "yourname", count: 5}; . $ ( "# Idofelementwhereuwanttoappend") добавить ($ ( "# infoWindowTemplate") TMPL (tmpldata).);

idofelementwhereuwantto приложить этот идентификатор, где будут отображаться данные вашего шаблона.

Answer 6

Это работает правильно

    var s = $.tmpl(url, dataContext).get()[0].data;

Я был не прав, приведенный выше пример работает только в том случае, если возвращено что-то отличное от HTML. В случае HTML я использую

    var s = $.tmpl(url, dataContext).get()[0].outerHTML

РЕДАКТИРОВАТЬ: После некоторых копаний я обнаружил различия между Chrome и FF (приведенные выше примеры работают в Chrome).

Наконец-то я нашел кросс-браузерный метод работы, давайте предположим, что нам нравится создавать теги. Таким образом, наш шаблон будет выглядеть как

    <a href='${url}'>${text}</a>

Самый простой способ получить результат в виде строки - это обернуть шаблон внутри любого тега, а затем использовать функцию .html ()

    var t = '<div><a href='${url}'>${text}</a></div>'
    var d = {url: 'stackoverflow.com', text: 'best site'};
    var html = $.tmpl(s, d).get()[0];
    html = $(html).html();  // trick is here