Basic Variables

Basic example of using variables in Handlebars

by Christopher McCulloh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
	<!-- inline HTML template -->
	<script id="sample-template" type="text/x-handlebars-template">
        {{! will not escape HTML }}
        {{{someHTML}}}
		{{#with who}}
            <p>Hello {{firstName}} {{lastName}}</p>
        
            {{!-- this is a silly contrived example to illustrate {{#with ../}} use --}}
            {{#with ../parent}}
                <p>Child of {{firstName}} {{lastName}}</p>
            {{/with}}
		{{/with}}
        
	</script>
	<div id="target"><!-- Template results whill appear here --></div>

JavaScript

var templateSource = $('#sample-template').html();
	var template = Handlebars.compile(templateSource);
	var context = {
		someHTML: '<h1>Basic Variables</h1>',
		parent:{
			firstName: 'Kelly',
			lastName: 'Hem'
		},
		who:{
			firstName: 'Pat',
			lastName: 'Soambiguous'
		}
	}
	var html = template(context);
	$('#target').html(html);