Using a JavaScript Template Engine - J Query

Problem

You want to use a JavaScript template engine to display JSON data.

Solution

This recipe is a book listing. It grabs information about a book from a server-side script and adds it to a list of books displayed in the browser. The book details are returned from the server as a JSON string. The Pure templating engine (available at http://plugins.jquery.com/project/pure) is used to format the data and insert it into the web page:

There are two buttons. One will fetch book details from the server when clicked. The other will clear the locally displayed book list. The book list will be displayed inside a <div>element with an id of book-list. These elements are visible when the page is loaded:

The <div>with an id of book-template has a class hidden assigned to it. This <div>is not displayed. It will be used as a template for the data received from the server. The Pure templating engine associates attributes in a data structure with HTML elements that have the same class. Therefore, the contents of the paragraph element with class year will reflect the value of the year attribute in our data structure:

The preceding code is an example of the JSON data that is returned from the server. The title, year, rating, and location attributes have a single value and map directly to a single element in the HTML template. In order to repeat any of these values more than once, one only has to assign the appropriate class to additional elements in the template.
The author attribute contains an array of objects. Each object has a single attribute: name. Multiple authors are represented this way in order to illustrate the iteration capabilities of the templating engine. The template contains a single list item element with class author. The list item contains a <span>element with class <name>. For attributes within the data structure that have an array value, an instance of the associated HTML element will be created for each element of the array. In this way, an arbitrary number of list items can be created:

Once the document is ready, the JavaScript code starts by using the jQuerydata() function to store the current id of the book we will be requesting. This id will be incremented each time a book is requested. The data() function allows arbitrary data to be stored in DOM elements:

When the “Add book” button is clicked, a request is made to the server using the jQuery getJSON() function. The templating process starts by making a clone of the hidden <div>in our HTML. The id of this clone must be changed before it is appended to the book list. If the id isn’t changed, then a DOM element with a non-unique id will have been introduced. The autoRender() function from the Pure plugin is then called with the JSON data as an argument. This renders the template using the provided data.Lastly, the hidden class is removed, making the book details visible:

The function to clear the book list is fairly straightforward. The appropriate <div>element is emptied, and the book id counter is reset to 1.

Discussion

There are two benefits to using JavaScript-based templating engines. One is that they allow the transformation of a JSON data structure into styled and structured HTML without manually manipulating each element of the data structure. This benefit can be realized by applying a templating engine to the variety of small chunks of data that are commonly retrieved by Ajax calls, as this example illustrated.
The second benefit of using a JavaScript templating engine is that it produces pure HTML templates. These templates contain no traces of the scripting languages, which are usually used to denote the data to be templated, and implement functionality such as iteration. It’s difficult to take advantage of this when using the templating engine in the browser, as done in this recipe. The negative impact this has on a site’s appeal to search engines dissuades most people from going this route. However, jQuery and the Pure templating engine can be run in server-side JavaScript environments, as well. Jaxer, Rhino, and SpiderMonkey have all been known to work.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics