Search code examples
javascriptjqueryjquery-templates

Jquery tmpl using join approach for speed

I have seen a mention of using JQuery tmpl in a faster way to create a string instead of DOM elements: http://riley.dutton.us/2010/10/12/jquery-templates-vs-jqote-2-a-followup.html

I just can't seem to get it working though. I am using JQuery 1.6.4 and the latest tmpl files from GitHub. My code is below - can anyone point out the obvious mistake? Many thanks.

JsonData is a response from a web service and is correctly formed JSON - I can bind it using the well publicised approad to tmpl and also using JQote2.

jQueryTemplate looks something like: 

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

My JS to call the template:

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

I seem to get undefined as the result of $('#jQueryTemplate').template(); and this error:

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

Thanks for any help given.

Solution

  • After much digging I eventually found an example of this approach explained by Boris Moore. Thanks Boris for your great work. https://github.com/jquery/jquery-tmpl/issues/50

    I created a jsperf to compare the two approaches - it is my first jsperf so hopefully it is set up correctly to get meaningful results. It shows a massive difference. I guess it depends on usage but mine is pretty basic markup generation so the string output combined with .html() will do the trick. http://jsperf.com/jquery-tmpl-as-string

    Hope this helps if you find yourself needing to improve tmpl performance and don't have the opportunity to switch to another templating engine.