Last active
August 29, 2015 14:27
-
-
Save user512/e6d58c4b89dee517abbd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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