JQuery TMPL с использованием подхода соединения для скорости - PullRequest
Новая
       7

JQuery TMPL с использованием подхода соединения для скорости

1 голос
/ 24 ноября 2011

Я видел упоминание об использовании 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'

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

Ответы [ 2 ]

2 голосов
/ 24 ноября 2011

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

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

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

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

или

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

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

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

$( "#jQueryTemplate" ).tmpl(JsonData).appendTo("#container" );
0 голосов
/ 29 ноября 2011

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

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

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

...