Simple JavaScript templating with jquery-tmpl

When writing applications where you fetch data asynchronously from the server and render it to the user using AJAX you would have to deal with building DOM elements that would markup(v) the data. One way to avoid writing ugly looking strings of HTML in your JavaScript is to fetch the markup(n) directly from the server. But that would mean blurring the lines of separation of concerns. It would be nice if you had some kind of template HTML with placeholders for data where you could drop in the data fetched from your server and render it to the user. Well, JavaScript templating engines provide just that!

I said templating engines. Yes there are several engines that would cater to such needs of yours. But in this post we are going to look at a very basic yet powerful but relatively old engine, the JQuery Template or simply JQuery Tmpl. Its pretty easy to use. This post will be a small tutorial to using JavaScript templates for people who haven’t tried templating before. We will go through the basics of JQuery templates and then see an example usage.

Continue reading