I have started with Introduction to jQuery Templates, then jQuery Templates - tmpl(), template() and tmplItem() functions. In this blog we will see what supported tags are available in the jQuery Templates plugin.Template tags can be used inside template together in combination with HTML tags and plain text, which helps to iterate over JSON data.
Up to now, there are several supported tags in jQuery Templates plugin:
${expr} or {{= expr}}
{{each itemArray}} … {{/each}}
{{if condition}} … {{else}} … {{/if}}
{{html …}}
{{tmpl …}}
{{wrap …}} … {{/wrap}}
- ${expr} or {{= expr}}
Is used for insertion of data values in the
rendered template. It can evaluate fields, functions or expression.
Example:
<script id="attendeesTemplate" type="text/html"> <li> ${Name} {{= Surname}} </li> </script>
Either ${Name} or {{= Surname}} (with blank space between =<blankspace>Field) will work.
- {{each itemArray}} … {{/each}}
each is everywhere the same "(for)each", used to loop over array or collection
Example:
<script id="attendeesTemplate" type="text/html"> <li> ${Name} ${Surname} {{if speaker}} (<font color="red">speaks</font>) {{else}} (attendee) {{/if}} {{each phones}} <br /> ${$index}: <em>${$value}</em> {{/each}} </li> </script>
So, you see we can use ${$index} and ${$value} to get the current index and value while iterating over the item collection.
Alternatively, you can add index,value on the following way:
{{each(i,v) phones}} <br /> ${i}: <em>${v}</em> {{/each}}
Result would be:
Here is complete working example that you can run and see the result:
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Nesting and Looping Example :: jQuery Templates</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { var attendees = [ { Name: "Hajan", Surname: "Selmani", speaker: true, phones:[070555555, 071888999, 071222333] }, { Name: "Someone", Surname: "Surname", phones: [070555555, 071222333] }, { Name: "Third", Surname: "Thirdsurname", phones: [070555555, 071888999, 071222333] }, ]; $("#attendeesTemplate").tmpl(attendees).appendTo("#attendeesList"); }); </script> <script id="attendeesTemplate" type="text/html"> <li> ${Name} ${Surname} {{if speaker}} (<font color="red">speaks</font>) {{else}} (attendee) {{/if}} {{each(i,v) phones}} <br /> ${i}: <em>${v}</em> {{/each}} </li> </script> </head> <body> <ol id="attendeesList"></ol> </body> </html>
- {{if condition}} … {{else}} … {{/if}}
Standard if/else statement. Of course, you can use it without the {{else}} if you have such condition to check, however closing the {{/if}} tag is required.
Example:
{{if speaker}} (<font color="red">speaks</font>) {{else}} (attendee) {{/if}}
You have this same code block in the above complete example showing the 'each' cycle ;).
- {{html …}}
Is used for insertion of HTML markup strings in the
rendered template. Evaluates the specified field on the current data item, or the specified JavaScript function or expression.
Example:
- without {{html …}}
<script language="javascript" type="text/javascript"> $(function () { var attendees = [ { Name: "Hajan", Surname: "Selmani", Info: "He <font color='red'>is the speaker of today's</font> session", speaker: true }, ]; $("#myTemplate").tmpl(attendees).appendTo("#speakers"); }); </script> <script id="myTemplate" type="text/html"> ${Name} ${Surname} <br /> ${Info} </script>
Result:
- with {{html …}}
<script language="javascript" type="text/javascript"> $(function () { var attendees = [ { Name: "Hajan", Surname: "Selmani", Info: "He <font color='red'>is the speaker of today's</font> session", speaker: true }, ]; $("#myTemplate").tmpl(attendees).appendTo("#speakers"); }); </script> <script id="myTemplate" type="text/html"> ${Name} ${Surname} <br /> {{html Info}} </script>
Result:
- {{wrap …}}
It’s used for composition and incorporation of wrapped HTML. It’s similar to {{tmpl}}
Example:
<script id="myTmpl" type="text/html"> <div id="personInfo"> <br /> ${Name} ${Surname} {{wrap "#myWrapper"}} <h2>${Info}</h2> <div> {{if speaker}} (speaker) {{else}} (attendee) {{/if}} </div> {{/wrap}} </div> </script> <script id="myWrapper" type="text/html"> <table><tbody> <tr> {{each $item.html("div")}} <td> {{html $value}} </td> {{/each}} </tr> </tbody></table> </script>
All the HTMl content inside the {{wrap}} … {{/wrap}} is available to the $item.html(filter, textOnly) method. In our example, we have defined some standard template and created wrapper which calls the other template with id myWrapper. Then using $item.html(“div”) we find the div tag and render the html value (together with the div tag) inside the <td> … </td>. So, here inside td the <div> <speaker or attendee depending of the condition> </div> will be
rendered.
The HTML output from this is:
- {{tmpl …}}
Used for composition as template items
Example:
<script id="myTemplate" type="text/html"> <div id="bookItem"> <div id="bookCover"> {{tmpl "#bookCoverTemplate"}} </div> <div id="bookDetails"> <div id="book"> ${title} - ${author} </div> <div id="price">$${price}</div> <div id="Details">${pages} pgs. - ${year} year</div> </div> </div> </script> <script id="bookCoverTemplate" type="text/html"> <img src="${image}" alt="${title} Image" /> </script>
In this example, using {{tmpl “#bookCoverTemplate”}} I’m calling another template inside the first template. In the other template I’ve created template for a book cover.
The
rendered HTML of this is:
and
So we have seen example for each of the tags that are right now available in the jQuery Templates (beta) plugin which is created by Microsoft as a contribution to the open source jQuery Project.
I hope this was useful blog post for you.
Regards, HajanNEXT - jQuery Templates with ASP.NET MVC
