Understanding JQuery Template

Question

I am reading and trying to understand an example jQuery template.

<script id="movieTemplate" type="text/x-jquery-tmpl"> {{tmpl "titleTemplate"}} <tr class="detail"><td>Director: ${Director}</td></tr> </script> <table><tbody id="movieList"></tbody></table> <script> var movies = [ { Name: "The Red Violin", Director: "François Girard" ,Producer : "ssss" }, { Name: "Eyes Wide Shut", Director: "Stanley Kubrick" }, { Name: "The Inheritance", Director: "Mauro Bolognini" } ]; /* Convert the markup string into a named template, referenced by the {{tmpl}} tag */ $.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" ); /* Render the movies data, using the named template as a nested template */ $( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" ); </script> 

In this sample program, I cannot understand about:

/ * Convert the markup string to a named template using the {{tmpl}} tag * /

when we call: $ ("#movieTemplate") .tmpl (movies) calls the template so that we call the template function with input films and add it to the list of films

if i delete the code

 $.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" ); 

he does not work. Could you explain why we need it and what it does here, for example: / * Convert the markup string to a named template, that’s all.

I tried to read and realized that I was not getting this clarified

Answer 1

Here is a link to a template called "titleTemplate" , a template that is not yet defined:

 <script id="movieTemplate" type="text/x-jquery-tmpl"> {{tmpl "titleTemplate"}} <tr class="detail"><td>Director: ${Director}</td></tr> </script> 

This line defines the missing template:

 $.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" ); 

This is another way to say

 <script id="titleTemplate" type="text/x-jquery-tmpl"> <tr class='title'><td>${Name}</td></tr> </script> 

In essence, the example shows that you can define patterns in two ways.

• declaratively in HTML source, as <script type="text/x-jquery-tmpl"> elements
• programmatically from strings via $.template()