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

Ответ 1

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

• Создайте и заархивируйте именованную функцию шаблона

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

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

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

Ответ 2

Ответы здесь мне не помогли, однако Адам ответил мне на правильном пути: любой обернутый 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()

Ответ 3

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

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

Ответ 4

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

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

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

Обновление

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

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

Mustache.js: 1783 мс
jQuery.tmpl: 2243 мс

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

Ответ 5

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

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

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

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

EDIT: после некоторого копания я обнаружил различия между Chrome и FF (выше примеры работают в Chrome).

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

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

их самый простой способ получить resul в виде строки - это обернуть шаблон внутри любого тега, а затем использовать функцию .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

Ответ 6

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

idofelementwhereuwanttoappend this id, где будут отображаться данные вашего шаблона.