Introduction to Handlebars Templating Language
Handlebars is a templating language in JavaScript used to generate dynamic HTML code based on predefined templates. It allows for easy manipulation and rendering of data within HTML structures through a simplified syntax.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
HANDLEBARS Peter Larsson-Green J nk ping University Autumn 2018
HANDLEBARS What is it? A templating language implemented in JavaScript. What is it used for? To generate dynamic HTML code. const humans = [ {name: "Alice", age: 10}, {name: "Bob", age: 15}, {name: "Claire", age: 20} ] <ul> <li>Alice is 10 years.</li> <li>Bob is 15 years.</li> <li>Claire is 20 years.</li> </ul>
TEMPLATES A template is a description of some HTML code that can be generated. Template Generated HTML code <h1>The Da Vinci Code</h1> <div>Author: Dan Brown</div> <div>Pages: 359</div> <h1>The Da Vinci Code</h1> <div>Author: Dan Brown</div> <div>Pages: 359</div>
THE CONTEXT Context Generated HTML code <h1>The Da Vinci Code</h1> const book = { title: "The Da Vinci Code", author: "Dan Brown", pages: 359 } <div>Author: Dan Brown</div> <div>Pages: 359</div> Template <h1>{{title}}</h1> <div>Author: {{author}}</div> <div>Pages: {{pages}}</div> Context Generated HTML code const book = { title: "Don't go there", author: "Bob West", pages: 120 } <h1>Don't go there</h1> <div>Author: Bob West</div> <div>Pages: 120</div>
CONTEXT WITH NESTED OBJECTS Context const book = { title: "The Da Vinci Code", author: { name: "Dan Brown" }, pages: 359 } Generated HTML code <h1>The Da Vinci Code</h1> <div>Author: Dan Brown</div> <div>Pages: 359</div> Template <h1>{{title}}</h1> <div>Author: {{author.name}}</div> <div>Pages: {{pages}}</div>
THE IF BLOCK HELPER Context Generated HTML code const human = { name: "Alice", isOld: true } <h1>Alice</h1> Template <p>Alice is old.</p> <h1>{{name}}</h1> {{#if isOld}} <p>{{name}} is old.</p> {{else}} <p>{{name}} is young.</p> Context Generated HTML code {{/if}} const human = { name: "Bob", isOld: false } <h1>Bob</h1> <p>Bob is young.</p>
THE EACH BLOCK HELPER Template Generated HTML code Context <h1>Humans</h1> <h1>Humans</h1> const context = { humans: [ {name: "Alice"}, {name: "Bob"}, {name: "Claire"} ] } <ul> <ul> {{#each humans}} <li>Alice</li> <li>{{name}}</li> <li>Bob</li> {{/each}} <li>Claire</li> </ul> </ul> Can use {{@index}} to insert the index.
NESTING BLOCK HELPERS Context Template Generated HTML code <h1>Humans</h1> <h1>Humans</h1> const context = { humans: [ {name: "Alice"}, {name: "Bob"}, {name: "Claire"} ] } <ul> {{#if humans.length}} <li>Alice</li> <ul> <li>Bob</li> <li>Claire</li> {{#each humans}} <li>{{name}}</li> </ul> {{/each}} </ul> Context {{else}} <p>No humans </p> {{/if}} Generated HTML code const context = { humans: [] } <h1>Humans</h1> <p>No humans </p>
ESCAPING HTML CODE Context Generated HTML code Bob const human = { name: "Bob" } Template {{name}} Generated HTML code Context <h1>Bob</h1> const human = { name: "<h1>Bob</h1>" } Template {{{name}}} Generated HTML code <h1>Bob</h1>
