jQuery Templating

An example template is below:

<script type="text/html" id="template">
    <div data-content="author"></div>
    <div data-content="date"></div>
    <img data-src="authorPicture" data-alt="author"/>
    <div data-content="post"></div>
</script

And to use this do the following:

$("#template-container").loadTemplate($("#template"),
    {
        author: 'Joe Bloggs',
        date: '25th May 2013',
        authorPicture: 'Authors/JoeBloggs.jpg',
        post: 'This is the contents of my post'
    });

Similarly the content of the template could be held in a separate html file without the enclosing script tag, and used like the following:

$("#template-container").loadTemplate("Templates/template.html",
    {
        author: 'Joe Bloggs',
        date: '25th May 2013',
        authorPicture: 'Authors/JoeBloggs.jpg',
        post: 'This is the contents of my post'
    });

References :
http://codepb.github.io/jquery-template/
https://www.sitepoint.com/overview-javascript-templating-engines/

Related