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.

$.tmpl("<tr><td>${Column1}</td><td>${Column2}</td></tr>", dataObject).appendTo("#yourHtmlContainer");

You can also define a reusable template and later use it to bind the data to an HTML container control. Below is the syntax.

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

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JUquery Template sample</title>
    <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var employeeData = [
                { FirstName: "Rob", LastName: "Mathews", Age: 26 },
                { FirstName: "Richie", LastName: "Richards", Age: 32 },
                { FirstName: "Shawn", LastName: "Clarke", Age: 53 },
                { FirstName: "Dave", LastName: "Canterburry", Age: 42 }
            ];
 
            $("#MyTemplate").tmpl(employeeData).appendTo("#employeeContainer");
        });
    </script>
    <script id="MyTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td>${FirstName}</td>
            <td>${LastName}</td>
            <td>${Age}</td>
        </tr>
    </script>
</head>
<body>
    <table>
        <thead>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Age
            </th>
        </thead>
        <tbody id="employeeContainer">
        </tbody>
    </table>
</body>
</html>

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}}.

<script id="MyTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td>${FirstName}</td>
            <td>${LastName}</td>
            <td>${Age}</td>
            <td>{{if Age > 40}}
                    Yes
                {{else}}
                    No
                {{/if}}
            </td>
        </tr>
</script>

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.

<script type="text/javascript">
        function GetName(firstName, lastName) {
            return firstName + " " + lastName;
        }
</script>
<script id="MyTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td>${GetName(FirstName, LastName)}</td>
            <td>${Age}</td>
            <td>{{if Age > 40}}
                    Yes
                {{else}}
                    No
                {{/if}}
            </td>
        </tr>
</script>

Hope this article provided a good jump start for you to start working on the JQuery templates. Though this JQuery Templating feature works like a charm I am not sure why the JQuery team does not want this to go beyond the beta version. You can find more information related to it here.

Happy reading!



Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Protecting business operations means shifting the priorities around availability from disaster recovery to business continuity. Enterprises are shifting their focus from recovery from a disaster to preventing the disaster in the first place. With this change in mindset, disaster recovery is no longer the first line of defense; the organizations with a smarter business continuity practice are less impacted when disasters strike. This SmartSelect will provide insight to help guide your enterprise toward better …

  • You may already know about some of the benefits of Bluemix, IBM's open platform for developing and deploying mobile and web applications. Check out this webcast that focuses on building an Android application using the MobileData service, with a walk-through of the real process and workflow used to build and link the MobileData service within your application. Join IBM's subject matter experts as they show you the way to build a base application that will jumpstart you into building your own more complex app …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds