Handlebars is one of powerful javascript template engine which can help combine the template and data to html display.The basic work it does are very easy to understand as below:
1. Use custom html tag to define the template
<script type="text/x-handlebars">
{{#view App.AView}}{{firstName}}{{/view}}
</script>
<script type="text/x-handlebars" data-template-name="contributors">
{{#each person in controller}}
<a {{action showContributor person}}> {{person.login}} </a> </br>
{{/each}}
</script>
2.Use Javascript codes to get the templates and compile it with data
var script = Ember.$(this),
type = script.attr('type');
var compile = (script.attr('type') === 'text/x-raw-handlebars') ?
Ember.$.proxy(Handlebars.compile, Handlebars) :
Ember.$.proxy(Ember.Handlebars.compile, Ember.Handlebars),
// Get the name of the script, used by Ember.View's templateName property.
// First look for data-template-name attribute, then fall back to its
// id if no name is found.
templateName = script.attr('data-template-name') || script.attr('id'),
template = compile(script.html()),