RE_Handlebars

Tags: #◇Web Development #◇CCAPDEV #◇RE Handlebars #◇Code Snippets #◇M4

◇Overview

Extracted notes for RE_Handlebars covering both theoretical and practical elements.

◇Key Definitions

Expressions HTML Escaping If Statements Loops Helpers Partials For Today
Remember to properly set-up your project to use Handlebars Require “express” and “express-handlebars” Set the link to your public folder Set your Express app’s view engine to hbs The sample app.js starting code set-up and the proper project hierarchy is shown in the next set of slides This lecture will focus on Handlebars code samples. For each sample, assume that index.hbs is the main content rendered into main.hbs (this is also shown in the next set of slides) A Few Reminders Before We Proceed
├── views │ ├── layouts │ │ └── main.hbs │ ├── partials │ │ ├── header.hbs │ │ └── footer.hbs │ └── index.hbs ├── public ├── node_modules ├── app.js ├── package-lock.json └── package.json Project Folder
├── views │ ├── layouts │ │ └── main.hbs │ ├── partials │ │ ├── header.hbs │ │ └── footer.hbs │ └── index.hbs ├── public ├── node_modules ├── app.js ├── package-lock.json └── package.json Project Folder Highlighted text are folders
├── views │ ├── layouts │ │ └── main.hbs │ ├── partials │ │ ├── header.hbs │ │ └── footer.hbs │ └── index.hbs ├── public ├── node_modules ├── app.js ├── package-lock.json └── package.json Project Folder Mind the file extensions

◇Code Implementation

Important functions to improve your page templates 
.RE:Handlebars.

const express = require("express");
const exphbs = require("express-handlebars");
const app = express();
app.use(express.static(__dirname + "/public")); 
app.set("view engine", "hbs");
app.engine("hbs", exphbs({extname: "hbs"}));
// Server.listen() and routing methods omitted

 Text Editor
app.js 

// Previous HTML tags are omitted
// Assume all proper imports are included
<div id="page">
	{{> header }}
	{{{ body }}}
	{{> footer }}
</div>

 Text Editor
main.hbs 

Code Samples | Expressions
Handlebars Expressions are the basic unit of a Handlebars template
You can use them alone, in a {{mustache}}, pass them to a Handlebars helper, or use them as values in hash arguments

Code Samples | Expressions
Handlebars expressions are some content(s) enclosed by double curly braces {{}}
The template in the next set of slides include firstname, which is a variable enclosed by double curly braces. This means that it is an expression

◇Syntax Breakdown

Ensure correct syntax for RE_Handlebars Pay attention to specific functions and declarations.

◇Complexity Analysis

Time Complexity: O(1) for typical operations unless looping. Space Complexity: O(1) generally.

◇References & Navigation

• Previous Topic: ◇Handlebars
• Next Topic: ◇MongoDB
• Related Notes: ◇Client Server Architecture