JQuery Templates

Share on facebook
Share on twitter
Share on linkedin
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.

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

TagsUsage
{{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 Box
Text Box
Shape
Shape
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  

jquery templates

References: 

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

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

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.