You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

JQuery Templates


JQuery templating is a fast and efficient technique to render client-side templates using a JSON data source. It refers to the client-side data binding method with the JQuery.

Templating is essentially a combination of data and layout. The advantage of doing this is that your data and how the data are kept are separate from each other. Now, templating is usually used to format frequently used contents.

There are several types of templates available, as below

  1. Mustache.js
  2. Handlebars.js
  3. jQuery Template
  4. Underscore.js
  5. Embedded JS Templates (EJS)

It is powerful with zero dependencies. Then it’s compatible with server-side environment like Node.js, module loaders like RequireJS, Browserify or webpack and all web browsers.

Template Tags: 

Within the template, we can use any of the following tags

Tags Usage
{{tmpl}} Used for template composition
{{wrap}} It’s used for composition and incorporation of wrapped HTML. It’s similar to {{tmpl}}
{{each}} Used to iterate through a collection
{{if}} Used to conditionally display template content
{{else}} Used with {{if}} to conditionally display template content
{{html}} Used for insertion of HTML markup strings in the rendered template. Evaluates the specified field on the current data item, or the specified JavaScript function or expression
{{! }} Used for displaying comments. The contents of a {{!…}} tag are ignored

 

How do jQuery Templates work?  

jQuery Template is applied to data objects or arrays and is rendered into the HTML using jQuery functions for DOM manipulation.

Text BoxText Box

ShapeShape

Text Box

Shape

Text Box

Benefits of using JQuery

  1. Without Parsing we can easily convert the JSON object into HTML
  2. Reusability
  3. Rendered and cached on client side
  4. Separation of using UI and DATA

In the following example, we will describe how JQuery template works.

First, we must add reference to the JQuery library and JQuery Template.

Text Box

Now, we want to invoke the data in HTML and display in web browser. So, we have created an ordered list inside the body tag

Text Box

Generally, we will get data from server side / web service, but here we are creating sample JSON Data manually.

Text Box

Then, we will create the JQuery template defining how the data will display. We can use ${} to get the data from the JSON string.

Text Box

Here, we will append the JSON data inside the HTML body tag.

Text Box

Output  

References: 

1. http://codepb.github.io/jquery-template/

2. http://www.codeguru.com/csharp/csharp/working-with-jquery-templates.htm