Super Simple JavaScript Templating

After hours of writing the same ( or at least very similar ) code in a few projects I was working on, I decided it was time to sit down and create a super simple template function that I could use in any project where the big guys (mustache, handlebars, etc) were a bit of overkill. So I wrote SimplateJS (Simple Template) in about ten minutes. I then took this code and added into an older project. It worked and I liked it. So without further ado, here is how it works.

I created a global object called simplate. This can obviously be changed if that doesn't work for you ( just update the variable name at the top of the code ). The object has two public methods: set and get.

Let's say we want to create a table that contains a list of users. We will display their first name, last name and age. That's pretty standard stuff. First, let's create a new template using the set method. It takes two parameters: the name of the template and the template itself.

In this example, I will create a template called "table.tr" and it will contain a simple table row. I used the standard mustache/handlebars syntax for variables "{{variable}}".

Copycopy code to clipboard
1simplate.set( 'table.tr', '<tr><td>{{firstname}}</td><td>{{lastname}}</td><td>{{age}}</td></tr>' );

Pretty easy right?

Next, we want to retrieve our template. For that we can use the get method. You can just pass it the name of the template you want to retrieve ( ie: 'table.tr' from above ) and it will return the template as is with no modification.

Copycopy code to clipboard
1var results = simplate.get('table.tr');
2console.log( results );
3//<tr><td>{{firstname}}</td><td>{{lastname}}</td><td>{{age}}</td></tr>

From there can write any code you want to manipulate the template string. But, I wanted something more. I tend to get my data from REST API's and they give me an array of JavaScript objects back. Wouldn't it be nice if we could just pass that along as well? And that's where this little script shines.

You can pass an array as the second optional parameter to the get function. It will take the array and apply its values into the template for you and return the final results. Now, to me, that is actually helpful.

Let's continue with the example above and say we have an array of data returned from an API. We can use our get method and pass the data as the second parameter and get back the resulting table rows.

Copycopy code to clipboard
1// Sample data from API
2var data = [
3  {'firstname' : 'John', 'lastname' : 'Doe', 'age' : 25 },
4  {'firstname' : 'Jane', 'lastname' : 'Doe', 'age' : 26 },
5  {'firstname' : 'Jim', 'lastname' : 'Doe', 'age' : 3 }
6];
7
8var results = simplate.get( 'table.tr', data );
9console.log( results );
10
11// <tr><td>John</td><td>Doe</td><td>25</td></tr>
12// <tr><td>Jane</td><td>Doe</td><td>26</td></tr>
13// <tr><td>Jim</td><td>Doe</td><td>3</td></tr>

Short and sweet! I like that.

Obviously this is nothing new and I am sure there as many ways to do this as there are developers out there, but for me and my workflow, this just works. Your mileage may vary... But at 1kb uncompressed, it is small enough to be included in any project where the big guys are just too much overhead.

You can check out the source code on Github.

'Til next time,

-G