You can use two basic methods for creating jQuery Templates. Which one you use depends on the nature of your project, the makeup of your team, and the performance demands on your site or application.
1. Creating Inline Templates
The cleanest way to create templates is through the use of a specially crafted script tag:
<script id=”comics” type=”text/x-jquery-tmpl”>
<div class=”comic”><img src=”${imgSrc}” />
<div class=”details”>
<div class=”title”>
<h3>${title}</h3>
</div>
<div class=”year”>
${year}
</div>
<div class=”number”>
${number}
</div>
</div>
</div>
</script>
Code snippet is from script-tag-template.txt
This example creates a jQuery Template with the name comics. The id is tied to the name of the template in the templating engine. The special type indicates to jQuery that it’s a template script block. The browser itself ignores that script block because it doesn’t know what to do with a script of type text/x-jquery-tmpl. This example also introduced the first template tag, ${}, which exposes variables to the template structure.
This is the cleaner of the two patterns, representing a pretty full break between structure and behavior. This the recommended pattern if you don’t have many templates or if you need to expose templates to team members who may not spend a lot of time poking around JavaScript files.
As a note, it’s also possible to create templates in any element (a DIV with display:none as a CSS rule, for example), but such markup might cause unexpected errors.
2. Creating Templates with the $.template() Method
Alternatively, you can create templates directly in your JavaScript files using the $.template() method:
$.template(‘comics’ , ‘<div class=”comic”>
<img src=”${imgSrc}” /><div class=”details”><div class=”title”>
<h3>${title}</h3></div><div class=”year”>${year}</div>
<div class=”number”>${number}</div></div></div>’);
Code snippet is from template-method.txt
Both examples use the same template format, with variables encapsulated in ${} blocks. The difference here is that the template string passed as the second of a pair of arguments to the $.template() method. The first argument is the id of the template, analogous to the id attribute of the script tag in the first example.
Because it’s not as clean a separation, this method is suggested only if you have many templates in your site or application and want to leverage browser caching for the template definitions. Because the previously illustrated specially formatted script blocks are included inline in the markup, they’re downloaded and parsed each time a page is loaded.
Placing your templates in a script file enables them to be downloaded once and then retrieved from memory on each subsequent page view, saving network connection and download time. This may not matter if your templates are focused on individual pages or site sections in a single-page application, but if you have many templates spread across a large site, it might be preferable to have them served in a cacheable manner.
Making the $.template() Method Maintainable
If you find yourself needing to use the $.template() method, we suggest looking at something similar to the following pattern. It uses a single function to initialize all templates for the site or application. This way, while the markup being kept in JavaScript files is not the best possible solution, it’s at least kept in a single, more maintainable location. You always know where your templates are. The following code illustrates this pattern. The basic pattern should be familiar from Chapter 10’s discussion of the Garber-Irish implementation. In it you have a common object which holds code common to all pages. One piece of that code is a method called init. init, among any other functions it needs to call to start up your app, also initializes all the templates for your site by firing the myApp.common.templates() method.
var MyApp = {
common :
init : function(){
myApp.common.templates();
},
templates: function(){
$.template(‘comics’ ,
‘<div class=”comic”><img src=”${imgSrc}” /></div><div class=”details”>
<div class=”title”><h3>${title}</h3></div><div class=”year”>${year}</div>
<div class=”number”>${number}</div></div></div>’);
$.template(‘author’ , ‘<div class=”author”>
<div class=”name”><h3>${author}</h3></div><div class=”bio”>
<p>${authorBio}</p></div></div>’);
},
}
}
Code snippet is from template-maintenance.txt
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc