Instroducing jQuery.jsonTemplate

code | 6-3-2013

This is entirely experimental, but I've created a purely JSON-based templating system called jQuery.jsonTemplate.

The idea is to have a completely JSON-based nested markup language that compiles to HTML and back again.

Using it is pretty simple. You just need to add all of the properties you would typically use in HTML to the JSON structure like this:

$("#my-element").jsonTemplate(
    [{
       type: 'h1',
       content: 'Hello World'
    }]
);

The code above would append this to the element with an id of "my-element":

<h1>Hello World</h1>

You can even do nested elements inside of each other like this:

$("#my-element").jsonTemplate(
    [{
       type: 'div',
       items: [{
            type: 'p',
            items: [{
                type: 'strong',
                content: 'Hi there!'
            }]
       }]
    }]
);

You can easily convert HTML to the jsonTemplate format as well:

<h1>Hello World</h1>
<script type="javascript">
  var template = $("h1").jsonTemplate();
  console.log(template); // { type: 'h1', content: 'Hello World' }
</script>

The basic idea behind a templating language like this is that it could be primarily driven by JavaScript and you could use all of the methods in JavaScript to manipulate the data before you render it with jsonTemplate. I'm not sure that it necessarily has an advantage over the string-based templating languages like EJS or Mustache, but it was a fun little project to knock out. I'm considering porting this for Node too, if there's any interest in it.

Since I used all of the attributes that HTML gave me out of the box and only tacked on a few attributes like "content" to render the HTML, "items" to render an array of items in an element and "type" to determine the element type, the code is only a couple hundred lines long even when it's uncompressed.

I'd be interested to see what other people think of this little jQuery plugin and whether anyone is able to find practical uses for it.

If you'd like to check it out, here is the project on Github.



About the Author

Tyson Cadenhead is a Senior JavaScript Developer at Aloompa. He lives in the greater Nashville area. His specialty is writing large, scalable JavaScript applications on the client and server side. His passions are for good design, usability, and clean, reusable code.

Tags: JSON Template

Related Posts:

comments powered by Disqus

Don't Miss Anything!

Sign Up For My Email Newsletter

I Wrote a Book!

Popular Posts