Question

I have a jquery template where I have to combine some variables together like so:

{{= year}}-{{= month}}-{{= day}}-{{= hour}}

I’m coming from jqote templates where you can just use javascript within the template. Is this possible within jquery templating? I can’t find any help on this issue. Thanks.

Also I’m using the weird syntax because groovy doesn’t like ${}.

<script id="mainTemplate" type="text/x-jquery-tmpl">
<ul>        
    {{each(i, wrapSpec) data}}          

    <li><a href="#pkgLineTabs_{{= wrapSpec.wrapSpecId}}" id="{{= wrapSpecId}}">{{= wrapSpec.wrapSpec2.pkgLineId.pkgLineTree.treeId.name}} {{= wrapSpec.shortname}} </a></li>

    {{/each}}
</ul>

{{each(i, wrapSpec) data}}

<div id="pkgLineTabs_{{= wrapSpec.wrapSpecId}}" style="font-size:12px" class="reportTable display {{= wrapSpec.wrapSpec2.pkgLineId.hash}}" title="{{= wrapSpec.wrapSpec2.pkgLineId.hash}}" >    

    {{tmpl(wrapSpec.report) "#dayTemplate"}}

</div>  

{{/each}}

In jqote I could just say var pkgLineId = wrapSpec.wrapSpec2.pkgLineId.

So instead of saying wrapspec.wrapSpec2.pkgLineId.hash I could just put pkgLineId.hash.

Answer 1

You can use the ${ } Template tag to embed a function or expression in a jQuery template.

http://api.jquery.com/template-tag-equal/

You can pass global variables to the template by way of the window object:

var year = 2011;

var myTemplate = $("<div><b>Year: ${year}</b></div>").template();
$.tmpl(myTemplate, window).appendTo("#myDiv");

Or:

var currentDate = {'year' : 2011};

var myTemplate = $("<div><b>Year: ${year}</b></div>").template();
$.tmpl(myTemplate, currentDate).appendTo("#myDiv");

Here is a jsfiddle that accomplishes what I think you are trying to do: http://jsfiddle.net/GTjXz/1/

EDIT: jsfiddle which dynamically declares new properties on the $item object in the template: http://jsfiddle.net/GTjXz/2/