A Brief Introduction

JQuery has introduced a brand new plugin that’s sure to make the lives of JavaScript programmers far simpler. There have been other attempts at a JavaScript templating system in the past, however the latest implementation seems to be the cleanest yet. In today’s tutorial, we’ll dive into the new templating system and discover just what it can do for us and how it can help. Ready? Let’s go!

Step 1: The HTML

Let’s set up a simple HTML page to help us mess around with the templating plugin. We’ll have just the standard <html>, <head>, and <body> tags for now, and be sure to link the JavaScript files to the header in the correct order. Take note of the templating plugin file called jquery-template.js. This is the file that will provide us the functionality we need to take advantage of JQuery templating. You can head over to the JQuery website to download it if you’d like, but we’ve included it in the source files to make your life a bit easier.

Step 2: The JavaScript

Essentially, the JQuery template plugin consists of three small plugins:

1 .tmpl() – Render the template item.
2 .tmplItem() – Find the template item.
3 .template() – store the template item.

There are several tags that are being used to implement the template system, you can even have conditional if..else statements in a template. For today’s post, however, we’ll keep it basic so that you can see what’s going on. We’ll be dealing with .tmpl() for rendering the template, and ${…} for inserting values and data.

The first thing we’ll need is some data that we’ll render into our template, so let’s go ahead and create an array of objects. We’ll include our script in the body of our HTML page. Here’s what it should look like:

So now we have some raw data that’s ready to be put into the JQuery Template system. Let’s take a look at how this will work.

2.1: The template system

The first thing we’ll need to do is to set up the template. We could essentially do this in a number of different ways, but today we’ll be using an unordered list for our template. We’ll also need to use a special type attribute in our script tag. Have a look:

If you’re familiar with programming, it should be pretty easy to see what’s going on here. Basically, for each one of the ninjas in our array, JQuery is going to print out the name and skill of the ninja as a list item. This is the backbone of our template. We’re essentially telling JQuery what type of HTML elements we’d like to render as a result of the evaluation of our array. There are still a few more steps to finish up, so let’s keep moving.

The next step is to have the actual target element ready to accept the results. Since we’re using a list item to render each result, it seems fitting that they should be placed within an unordered list. Let’s add the unordered list to our page now:

We can now write the JQuery code that will render our template, and append the results to our unordered list. Here’s what the finishing touches look like:

Now, when you view the HTML page in your browser, you’ll see that JQuery has produced an unordered list of our ninjas and their skills.

We used the .tmpl() function to pass in our ninjas array to the template, and then we simply appended each result to the #results unordered list. This is the JQuery template system in a nutshell, and as you can see it’s extremely simple to use.

A Few Last Words

In its simplest form, the JQuery template plugin has helped us to render data into our HTML file with very little effort. This can be amazingly useful and can save you a lot of extra typing when creating your JavaScript applications. In our next template tutorial, we’ll see how we can implement some more advanced features such as conditional statements. We’ll see you guys there!

Download Source Files