Handlebarsjs JavaScript template engine

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

Result

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

References
http://handlebarsjs.com/
https://www.sitepoint.com/overview-javascript-templating-engines/

JavaScript String.format()

'Github is %s'.format('awesome');                  // "Github is awesome"
'One answer may be %i'.format(42);                 // "One answer may be 42"
'Another answer may be %.5f'.format(Math.PI);      // "Another answer may be 3.14159"
'%.5f is not equal to %.5f'.format(22/7, Math.PI); // "3.14286 is not equal to 3.14159"
'PI minus 3 is %0.5f'.format(Math.PI - 3);         // "PI minus 3 is 0.14159"
'%,d is a really big number'.format(299792458);    // "299,792,458 is a really big number"
'%0,2f is a smaller number'.format(12021.12);      // "12,021.12 is a smaller number"

References :
https://github.com/jsoverson/string-format

Keywords :
String , Format

Mustache a JavaScript Templating Engine

<script id="template" type="x-tmpl-mustache">
  <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
</script>
//Grab the inline template
var template = document.getElementById('template').innerHTML;

//Parse it (optional, only necessary if template is to be used again)
Mustache.parse(template);

//Render the data into the template
var rendered = Mustache.render(template, {name: "Luke", power: "force"});

//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;

References :
https://www.sitepoint.com/overview-javascript-templating-engines/

Keywords :

Template , String , HTML

HTML5 Custom Data Attributes

Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

Set Attributes

$("button").click(function(){
    $("#w3s").attr("data-sowing-time", "March to June");
});

Get Attributes

$("button").click(function(){
    alert($("#w3s").attr("data-sowing-time"));
});

References :
http://html5doctor.com/html5-custom-data-attributes/
http://www.w3schools.com/jquery/jquery_dom_set.asp
http://www.w3schools.com/jquery/jquery_dom_get.asp

Keywords :

HTML , Attribute , User

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/