A Better JavaScript Template Engine

7

Posted on : 08/25/2008 | By : Jimmy Vu | In : Solution

Rizqi Ahmad from Germany has introduced a nice solution for client-side template based on JQuery. The Chain.js allows you to use any piece of HTML (or embedded HTML string) as template to display data dynamically.

In introductory post, he went through some common approach like server-side data binding, injecting preformatted HTML (into well-known DOM property innerHTML) and directly manipulating DOM, then explained why Chain.js is better way:

  1. Easy and compact (as it uses JQuery for manipulating DOM)
  2. Preserve event(s) on updates
  3. Allow dynamically add/remove data

To use the engine, you’ll need to download JQuery (better the latest version) and Chain.js then add script tags to load them.

<script src="path/to/jquery.js" language="javascript"> </script>
<script src="path/to/chain.js" language="javascript"> </script>

Practical Example on Chain.js

Now, we’ll create a practical example that allows user select a programming language and display recommended reading books accordantly. This is almost similar to another example I created for PURE library.

First, build a template table to display book list:

Read the rest of this entry »

Recommended Reading

The Starch Solution: Eat the Foods You Love, Regain Your Health, and Lose the Weight for Good!The Starch Solution: Eat the Foods You Love, Regain Your Health, and Lose the Weight for Good!A bestselling author’s groundbreaking eating plan that challenges the notion that starch is unhealthy

From Atkins to Dukan, the fear-mongerin... Read More >
The Paleo Solution: The Original Human DietThe Paleo Solution: The Original Human DietDo you want to lose fat and stay young, all while avoiding cancer, diabetes, heart disease, Parkinson's, Alzheimer's and a host of other illnesses? Th... Read More >
The Innovator's Solution: Creating and Sustaining Successful GrowthThe Innovator's Solution: Creating and Sustaining Successful GrowthIn his worldwide bestseller The Innovator's Dilemma, Clayton M. Christensen exposed this crushing paradox behind the failure of many industry leaders:... Read More >