Handlebars JS Example 1

HTML

<script src="http://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
	<h1>Input
	</h1>

	<input class="inputdata" id="title_a_0" />
	<input class="inputdata" id="img_a_0" />
	<br/>
	<input id="numberOfPeopleToAdd" value="1" />

	<br/>
	<button id="render">
	Render
	</button>

	<h1>Output</h1>
	<div class="insidedata">
	<script id="some-template" type="text/x-handlebars-template">
	{{#users}}
	      {{personA.title}} = new Image;
  {{personA.title}}.src = "{{personA.img}}"
  confettis.push({{personA.title}});
	{{/users}}
	</script>
	</div>

CSS

body{
			width:100%;
			-webkit-text-size-adjust:100% !important;
			-ms-text-size-adjust:100% !important;
			margin:0;
			padding:0;
		}
		img{
			border:0;
			outline:none;
			-ms-interpolation-mode:bicubic;
		}
		a img{
			border:0;
		}
		.ExternalClass{
			width:100%;
		}
		.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
			line-height:100%;
		}
		table,td{
			mso-table-lspace:0pt;
			mso-table-rspace:0pt;
			border-collapse:collapse;
		}
		.dsidx-primary-data{
			width:260px;
		}
		.dsidx-primary-data th{
			text-align:left;
		}
		#white,#white a{
			color:#ffffff!important;
		}
		p.MsoNormal{
			background:#ffffff!important;
			height:0px!important;
			display:none!important;
			margin:0px!important;
		}
		table#tableizer-table{
			border:1px solid #CCC;
			font-family:Arial, Helvetica, sans-serif;
			width:100%;
			font-size:12px;
		}
		#tableizer-table td{
			padding:4px;
			margin:3px;
			border:1px solid #ccc;
			text-align:right;
		}
		#tableizer-table th{
			background-color:#222222;
			color:#FFF;
			font-weight:bold;
			text-align:center;
		}
		#tableizer-table td:nth-child(1){
			text-align:left;
		}
	@media only screen and (max-width: 480px){
		table[class=device-width],td[class=device-width],img[class=device-width]{
			width:320px !important;
			height:auto !important;
			max-width:320px !important;
		}

}	@media only screen and (max-width: 480px){
		table[class=inner-width],td[class=inner-width],img[class=inner-width]{
			max-width:240px !important;
			width:240px !important;
			height:auto !important;
		}

}	@media only screen and (max-width: 480px){
		td[class=hero-1]{
			width:320px !important;
			height:auto !important;
			background-position:center !important;
			background-size:cover !important;
			padding-top:60px !important;
			padding-bottom:60px !important;
		}

}	@media only screen and (max-width: 480px){
		td[class=hero-2]{
			width:320px !important;
			height:auto...

JavaScript

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var newData = {users: []};


var data = { 
    users: [ { 
        person: {
            fullName: "Jim"
        },
        jobTitle: "Front End Technical Lead",
        twitter: "gazraa" 
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        }, 
        jobTitle: "Photographer",
        twitter: "photobasics"
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        }, 
        jobTitle: "LEGO Geek",
        twitter: "minifigures"
    } ]
}; 


$("#render").click(function(){

  for(i=0;i<$("#numberOfPeopleToAdd").val();i++){
      newData['users'].push({ 
            personA: {
                title: $("#title_a_"+i).val(),
                img: $("#img_a_"+i).val(),
            }, 
        });
  }
	$('.insidedata').text("");
	$('.insidedata').append(template(newData));
});