Skip to content

Instantly share code, notes, and snippets.

@user512
Last active August 29, 2015 14:27
Show Gist options
  • Save user512/e6d58c4b89dee517abbd to your computer and use it in GitHub Desktop.
Save user512/e6d58c4b89dee517abbd to your computer and use it in GitHub Desktop.
Handlebars
- Clinet side JS templating engine
- JS library included in the HTML page
- Allows adding templates to your HTML page
Reason to use a JS tempting engine
- fast, on clinet side
- easier to read with a lot of string interpolation.
When to use JS tempting engine
- Keep HTML Mark up from JS code
How Handlebars.js works?
1. Take the template
2. Pass to complier
3. Takes the data
##### Handlebars Expressions
1. Simple Handlebars expression: {{content}}
2. Handlebars block expressions:
4. HTML string to the html document
{{#each}}
<h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
<div>{{body}}</div>
{{/each}}
Handlebars expression with HTML:
<div>Name : {{customerNAme}}</div>
##### Data(or Context)
- Pass data as an object. Object can be arrays, strings, numbers, other objects or a combination of all these.
var theData = [{name: "Michael", age: 25}, {name: "John", age: 35}];
<script>
{{#each this}}
<li> Name: {{name}}, Age:{{age}}</li>
{{/each}}
</script>
In the above case, each can iterate the array in theData
####
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment