• Roughly follows the Mustache specification
• Provides a super-easy way to create dynamic html with JavaScript objects.
• Store your templates in your html.
• Include Handlebars by downloading, Bower, or cdn.

• <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js"></script>

•  How to render a template with an object

 var rawTemplate = $('#itemTemplate').html(); var compiledTemplate = Handlebars.compile(rawTemplate); var finishedHtml = compiledTemplate(obj); $('#items').append(finishedHtml);

<script id="itemTemplate" type="text/x-handlebars-template">   <div class="header">{{title}}</div>   <div class="body">       <div>{{type}}</div>
       <div>{{price}}</div>   </div></script>

 var product = {     title : "Cheese",     type : "Sharp Cheddar",     price : "$3.49" }

• Blocks create looping or conditional behavior
• Typically used to determine whether properties exist or for accessing sub-arrays.
• If block:

 {{#if type}}    <div>Type: {{type}}</div> {{else}}    <div>Type: None</div> {{/if}}

• Each block:

 {{#each products}}    <div>{{title}}</div>    <div>{{price}}</div> {{/each}}

• Enables you to create your own custom tags with behavior.
• Useful for formatting & custom html behavior
• Think about redesigning your objects before creating a new helper.
• Register a helper in JS. First arg is name, second is a function to determine output. Can take arguments.

 Handlebars.registerHelper('formatMoney', function(arg1) {    return Handlebars.SafeString('$' + arg1);});

• Using it in your Handlebars template:

 {{formatMoney price}} //price is a property from your object

• Very useful for organizing code & abstracting ideas.
• Namespaces use Object literal declaration.
• Can't make new objects from it.
• Shouldn't hold state.
• Good for utility functions, static properties.
• Why use Namespaces?
• Keeps Global scope clean.
• Adds context to your functions.
• Allows you to cleanly share any code.

• Declarations first.
• Objects/Variables
• Functions
• Code to actually run comes last.

//constructor declarationfunction CustomObject() {};//using constructor to create an objectvar myObj = new CustomObject();myObj instanceof CustomObject;// > true