-
Notifications
You must be signed in to change notification settings - Fork 0
Read: 03
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The following is example code on how Handlebars might be used within HTML and JavaScript.
(at the time this article was written, the current handlebars version was v2.0.0.js)
HTML:
// From File
<script src="handlebars-v2.0.0.js"></script>
// From CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
HTML:
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
<p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
JS:
$(function () {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
`"city": "London",`
`"street": "Baker Street",`
`"number": "221B"`
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
});
HTML:
<script id="expressions-template" type="text/x-handlebars-template">
{{description.escaped}}
{{example}}
<br><br>
{{description.unescaped}}
{{{example}}}
</script>
<div class="content-placeholder"></div>
JS:
$(function () {
// Grab the template script
var theTemplateScript = $("#expressions-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
`"description": {`
`"escaped": "Using {{}} brackets will result in escaped HTML:",`
`"unescaped": "Using {{{}}} will leave the context as it is:"`
`},`
`"example": "<button> Hello </button>"`
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
});
HTML:
<!-- The #each helper iterates over an array of items. -->
<script id="example-template" type="text/x-handlebars-template">
<!-- people is looked up on the global context, the one we pass to the compiled template -->
{{#each people}}
`<!-- Here the context is each individual person. So we can access its properties directly: -->`
`<p>{{firstName}} {{lastName}}</p>`
{{/each}}
</script>
JS:
$(function () {
// Grab the template script
var theTemplateScript = $("#example-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// This is the default context, which is passed to the template
var context = {
`people: [ `
`{ firstName: 'Homer', lastName: 'Simpson' },`
`{ firstName: 'Peter', lastName: 'Griffin' },`
`{ firstName: 'Eric', lastName: 'Cartman' },`
`{ firstName: 'Kenny', lastName: 'McCormick' },`
`{ firstName: 'Bart', lastName: 'Simpson' }`
`]`
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$(document.body).append(theCompiledHtml);
});
HTML:
<script id="built-in-helpers-template" type="text/x-handlebars-template">
{{#each animals}}
`<p>`
`The {{capitalize this.name}} says`
`{{#if this.noise}}`
`"{{this.noise}}".`
`{{else}}`
`nothing since its a {{this.name}}.`
`{{/if}}`
`</p>`
{{/each}}
</script>
<div class="content-placeholder"></div>
JS:
$(function () {
// Register a helper
Handlebars.registerHelper('capitalize', function(str){
`// str is the argument passed to the helper when called`
`str = str || '';`
`return str.slice(0,1).toUpperCase() + str.slice(1);`
});
// Grab the template script
var theTemplateScript = $("#built-in-helpers-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// We will call this template on an array of objects
var context = {
`animals:[`
`{`
`name: "cow",`
`noise: "moooo"`
`},`
`{`
`name: "cat",`
`noise: "meow"`
`},`
`{`
`name: "fish",`
`noise: ""`
`},`
`{`
`name: "farmer",`
`noise: "Get off my property!"`
`}`
`]`
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
});
HTML:
<script id="block-expressions-template" type="text/x-handlebars-template">
<p> The <b> {{#uppercase}} konami {{/uppercase}} </b> Code is a cheat code that appears in many video games </p>
<p>During the title screen before the game demo begins, the player could press the following sequence of buttons on the game controller to enable the cheat:</p>
<p>{{#uppercase}}{{code}}{{/uppercase}}</p>
<p>The code is also present as an Easter egg on a number of websites.</p>
</script>
<div class="content-placeholder"></div>
JS:
$(function () {
// Grab the template script
var theTemplateScript = $("#block-expressions-template").html();
// This is our block helper
// The name of our helper is provided as the first parameter - in this case 'uppercase'
Handlebars.registerHelper('uppercase', function(options) {
`// "this" is the context that existed when calling the helper.`
`// The options object has a special function - fn. This is a`
`// compiled version of the template that is contained between the opening and closing`
`// blocks of this helper. To get a string, call fn with the context:`
`return options.fn(this).toUpperCase();`
});
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context = {
`"code": "up up down down left right left right b a select start"`
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
});