An Introduction to Handlebars

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()),