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
