JQuery, the open source, cross-browser JavaScript library, simplifies event handling, animations and general development of responsive Web applications. The official jQuery Web site states: “JQuery is designed to change the way that you write JavaScript.” Released in 2006 by John Resig, jQuery has since become very popular for its versatility, ease of use and numerous plugins, which extend the jQuery library.

The key features of jQuery include:

• Browser independence: jQuery is supported by most browsers.
• Simplified event handling model: The excellent, easy-to-use jQuery event handling model minimizes code and is consistent across all browsers. The event object is cross-browser and normalized, and one event object is always passed as a parameter to an event handler.
• Seamless extensibility: JQuery supports extensibility through an easy to use plugin API.

Getting Started with jQuery

To get started with jQuery, you should have the following installed in your system:

• Visual Studio 2008
• Visual Studio 2008 SP1
• jQuery Library
• Visual Studio 2008 jQuery Plug-in

Alternatively, you can acquire Visual Studio 2010, which comes with the jQuery library by default. To use jQuery, you can simply drag and drop the script onto your web form in the markup mode. Here’s the markup code that is generated:

Creating and Using jQuery Templates

The jQuery.template(name,template) method is used to create a reusable template. The first parameter is a string that indicates the compiled template. The second parameter is the HTML markup and/or the text to be used as a template. The jQuery official site states: “This method compiles the markup in the template parameter as a named template, which can be referenced using the string specified in the name parameter.”

To implement the jQuery templating plugin, you need to include the jQuery scripts as shown below:

Note that both jQuery 1.4.4 and jQuery Templates can be downloaded from Microsoft Ajax Content Delivery Network. Also, notice the usage of the script tag with a special MIME type.

The next step is creating a template using jQuery. Here is an example:

Next, create some data to render. Here is an example:

  var employees = [            { Name: "Peter Sanders", "E001" },            { Name: "Joydip Kanjilal", "E002" },            { Name: "Steve Mitch", "E003" },            { Name: "Peter Dan", "E004" }, { Name: "Jim Kanjilal", "E005" },        ];

The Complete jQuery Template Source Code

The following plugin script illustrates how you can display a list of employees stored in a JavaScript array:

    
             
Employee Records
         
         
           

Defining a jQuery Template Externally

You can also define a template externally and use it in your markup code. To do this, you should define a template in a data file. For example, you could create the following data file and name it EmployeeTemplate.htm:

Hello, ${empname}.
Then you can define the employee object as shown below:var employees = { empname: 'Joydip' };

You could then load the external template stored in the external file (EmployeeTemplate.htm) using the $.get() method and then render the external template using jQuery templates. Here is how to do that:

$.get('EmployeeTemplate.htm', function(template) {   $.tmpl(template, employee).appendTo('body');});

Summary

JQuery is a simple, light-weight and fast JavaScript library that has simplified the way you write your scripts. In this article we discussed the features of jQuery and how we can work with the jQuery templates. We also discussed how we can create and use jQuery templates in your application.

References