Jquery tmpl использует подход соединения для скорости

Я видел упоминание об использовании JQuery tmpl для более быстрого создания строки вместо элементов DOM: http://riley.dutton.us/2010/10/12/jquery-templates-vs-jqote.-2-a-followup.html

Я просто не могу заставить его работать. Я использую JQuery 1.6.4 и последние файлы tmpl с GitHub. Мой код ниже - может ли кто-нибудь указать на очевидную ошибку? Большое спасибо.

JsonData является ответом от веб-службы и имеет правильно сформированный JSON — я могу связать его с помощью широко разрекламированного приложения к tmpl, а также с помощью JQote2.

jQueryTemplate выглядит примерно так:

<script id="jQueryTemplate" type="text/x-jquery-tmpl">
    <li><span>${Name}</span><span>${ProductName}</span></li>
</script>

Мой JS для вызова шаблона:

var myTemplate = $('#jQueryTemplate').template();
var html = myTemplate($, { data: JsonData }).join('');
$("#container").html(html);

Кажется, я получаю неопределенность в результате $('#jQueryTemplate').template(); и эта ошибка:

Uncaught TypeError: Object 
<li><span>${Name}</span><span>${ProductName}</span></li> 
has no method 'join'

Спасибо за любую оказанную помощь.


javascript jquery jquery-templates
person likeaninja    schedule 24.11.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

определите свой шаблон следующим образом;

$.template( "jQueryTemplate", "<li><span>${Name}</span><span>${ProductName}</span></li>" );

визуализируйте свой шаблон следующим образом;

$.tmpl( "jQueryTemplate", JsonData ).appendTo( "#container" );

or

определите свой шаблон следующим образом;

<script id="jQueryTemplate" type="text/x-jquery-tmpl">
    <li><span>${Name}</span><span>${ProductName}</span></li>
</script>

визуализируйте свой шаблон следующим образом;

$( "#jQueryTemplate" ).tmpl(JsonData).appendTo("#container" );
person erimerturk    schedule 24.11.2011
comment
Привет, спасибо за ответ. Я думаю, что подход, который вы упомянули, является нормальным, широко разрекламированным использованием JQuery tmpl, но, согласно тестам и статье, на которую я ссылался в своем посте, он более чем в 6 раз медленнее, чем подход, который я пытался заставить работать. Это был код, который я пытался воспроизвести, но не смог (взято из пункта 3 статьи): template_object($, payload).join(); - person likeaninja; 24.11.2011

arrow_upward
0
arrow_downward

После долгих поисков я в конце концов нашел пример этого подхода, объясненный Борисом Муром. Спасибо Борис за отличную работу. https://github.com/jquery/jquery-tmpl/issues/50

Я создал jsperf для сравнения двух подходов — это мой первый jsperf, поэтому, надеюсь, он правильно настроен для получения значимых результатов. Он показывает огромную разницу. Я предполагаю, что это зависит от использования, но у меня довольно простая генерация разметки, поэтому строковый вывод в сочетании с .html() сделает свое дело. http://jsperf.com/jquery-tmpl-as-string

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

person likeaninja    schedule 28.11.2011