Tuesday, June 12, 2012

Working with JQuery Templates



Most often in the web applications you use JQuery to talk to some web service, fetch the data in JSON format and write some messy code to bundle the retrieved data with the HTML tags and add it to the HTML container. JQuery templates allow a developer to write quick, effective and clean code. By using JQuery templates you can simply define a template and pass on the JSON data to it in order to generate the client HTML content.
The JQuery templates feature is available in the file jquery.tmpl.min.js, which can be downloaded from here. It works well with JQuery version 1.4.4 or greater. The method that does this template data binding in JQuery is .tmpl().

Two Different Ways to Render a JQuery Template

A JQuery template can be rendered in two different ways. You can inject the child HTML tags along with the data expression to the .tmpl() method as a string. Below is the syntax.
    

  1. $.tmpl("<tr><td>${Column1}</td><td>${Column2}</td></tr>", dataObject).appendTo("#yourHtmlContainer");
    2.
You can also define a reusable template and later use it to bind the data to an HTML container control. Below is the syntax.
    

  1. $("#yourTemplate").tmpl(dataObject).appendTo("yourContainerControl");
    2.

Binding the JSON Data Using a JQuery Template - Example

In this section I will take you through creating a sample web page implementing a JQuery template. Create an empty Asp.Net web application and add an HTML page named JQueryTemplateSample.Htm. Add the reference to the JQuery and JQuery template script files onto the web page. In this web page I will bind the list of employee data on to an HTML table control using a pre-defined JQuery template. Below is the code.
    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4.     <title>JUquery Template sample</title>
    5. 

  5.     <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    6. 

  6.     <script src="Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    7. 

  7.     <script type="text/javascript">
    8. 

  8.         $(document).ready(function () {
    9. 

  9.             var employeeData = [
    10. 

  10.                 { FirstName: "Rob", LastName: "Mathews", Age: 26 },
    11. 

  11.                 { FirstName: "Richie", LastName: "Richards", Age: 32 },
    12. 

  12.                 { FirstName: "Shawn", LastName: "Clarke", Age: 53 },
    13. 

  13.                 { FirstName: "Dave", LastName: "Canterburry", Age: 42 }
    14. 

  14.             ];
    15. 

  15.  
    16. 

  16.             $("#MyTemplate").tmpl(employeeData).appendTo("#employeeContainer");
    17. 

  17.         });
    18. 

  18.     </script>
    19. 

  19.     <script id="MyTemplate" type="text/x-jquery-tmpl">
    20. 

  20.         <tr>
    21. 

  21.             <td>${FirstName}</td>
    22. 

  22.             <td>${LastName}</td>
    23. 

  23.             <td>${Age}</td>
    24. 

  24.         </tr>
    25. 

  25.     </script>
    26. 

  26. </head>
    27. 

  27. <body>
    28. 

  28.     <table>
    29. 

  29.         <thead>
    30. 

  30.             <th>
    31. 

  31.                 First Name
    32. 

  32.             </th>
    33. 

  33.             <th>
    34. 

  34.                 Last Name
    35. 

  35.             </th>
    36. 

  36.             <th>
    37. 

  37.                 Age
    38. 

  38.             </th>
    39. 

  39.         </thead>
    40. 

  40.         <tbody id="employeeContainer">
    41. 

  41.         </tbody>
    42. 

  42.     </table>
    43. 

  43. </body>
    44. 

  44. </html>
    45.
I have defined a static JSON employee data having the fields FirstName, LastName and Age. The template should be defined under the script tag with type as “text/x-jquery-tmpl”. This is a special type that allows JQuery to understand that it is a template definition. Run the web page and Fig 1.0 shows the data bound to the table.
Fig 1.0: JUquery Template Sample
Fig 1.0: JUquery Template Sample
Inside the template definition you can also make use of the ${{each}} tag to loop through the data and ${{if}} tag to implement an if/else condition. Below is the sample code where I can show the seniority based on the age of the employee using ${{if}}.
    

  1. <script id="MyTemplate" type="text/x-jquery-tmpl">
    2. 

  2.         <tr>
    3. 

  3.             <td>${FirstName}</td>
    4. 

  4.             <td>${LastName}</td>
    5. 

  5.             <td>${Age}</td>
    6. 

  6.             <td>{{if Age > 40}}
    7. 

  7.                     Yes
    8. 

  8.                 {{else}}
    9. 

  9.                     No
    10. 

  10.                 {{/if}}
    11. 

  11.             </td>
    12. 

  12.         </tr>
    13. 

  13. </script>
    14.
Now say you want the FirstName and LastName to be concatenated and shown as a single column EmployeeName then you can define a javascript function to concatenate two strings and call the function inside the template as shown below.
    

  1. <script type="text/javascript">
    2. 

  2.         function GetName(firstName, lastName) {
    3. 

  3.             return firstName + " " + lastName;
    4. 

  4.         }
    5. 

  5. </script>
    6. 

  6. <script id="MyTemplate" type="text/x-jquery-tmpl">
    7. 

  7.         <tr>
    8. 

  8.             <td>${GetName(FirstName, LastName)}</td>
    9. 

  9.             <td>${Age}</td>
    10. 

  10.             <td>{{if Age > 40}}
    11. 

  11.                     Yes
    12. 

  12.                 {{else}}
    13. 

  13.                     No
    14. 

  14.                 {{/if}}
    15. 

  15.             </td>
    16. 

  16.         </tr>
    17. 

  17. </script>
    18.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)