handlebars
Rich Finelli
Front End Developer
richfinelli.com
handlebars
HandleBars
Logicless templating language
An extension of the Mustache templating language
Keeps the view and the code separated
02 - CREATING THE TEMPLATE
Rich Finelli
Front End Developer
richfinelli.com
Creating a Javascript object
Building a basic template
03 - HandleBars.Compile()
Rich Finelli
Front End Developer
richfinelli.com
Compiling the template
Explore the Handlebars.compile() method
04 - Each helper
Rich Finelli
Front End Developer
richfinelli.com
Explore the built in helper {{#each}}
Understand what "context" refers to in the Handlebars.compile method
05 - stylING it up
Rich Finelli
Front End Developer
richfinelli.com
Apply CSS to make the list of characters look better
06 - if / else
Rich Finelli
Front End Developer
richfinelli.com
Conditionally render/not render html based on an if statement
07 - unless
Rich Finelli
Front End Developer
richfinelli.com
Conditionally render html based on an expression evaluating to false
08 - Moving from JS to JSON
Rich Finelli
Front End Developer
richfinelli.com
Data can be stored separately from your Javascript.
1 - Setup a local server using Gulp
2 - Move data from JS to JSON
3 - Ajax in the JSON file
09 - Working with data that's not SO flat
Rich Finelli
Front End Developer
richfinelli.com
How to work with deeper objects
10 - Custom Helpers - Part 1: Expressions
Rich Finelli
Front End Developer
richfinelli.com
How to create your own Handlebars helpers
2 types of Helpers
Rich Finelli
Front End Developer
richfinelli.com
Expression & Block
expressions
Rich Finelli
Front End Developer
richfinelli.com
{{name}}
{{location}}
{{house.seat}}Examples:
Blocks
Rich Finelli
Front End Developer
richfinelli.com
{{#each}}{{/each}}
{{#if}}{{/if}}
{{#with}}{{/with}}Examples:
11 - Custom Helpers - Part 2: Blocks
Rich Finelli
Front End Developer
richfinelli.com
How to create custom block helpers
2 types of custom helpers
Rich Finelli
Front End Developer
richfinelli.com
{{formatName name}}{{#makeBold}}
{{name}}
{{/makeBold}} Expression syntax
Block syntax
{{#toLower}}
{{location}}
{{/toLower}} 12 - I can't use jquery anymore!
What Happened?
Rich Finelli
Front End Developer
richfinelli.com
Introducing event delegation
"I started using handlebars and now my click events don't work!'
-Everybody
13 - Drilling in to data
Rich Finelli
Front End Developer
richfinelli.com
mastering-css.com
Rich Finelli
Front End Developer
richfinelli.com
13.1 - Drilling in to data
Light refacter
Rich Finelli
Front End Developer
richfinelli.com
14 - Partials
Rich Finelli
Front End Developer
richfinelli.com
Create re-usable Handlebars partial templates
15 - JSON to FIREBASE
Rich Finelli
Front End Developer
richfinelli.com
- Create a Firebase database
- Import JSON into Firebase
- Re-write our JS code to use the Firebase API