{"id":2422,"date":"2018-10-20T21:06:00","date_gmt":"2018-10-21T02:06:00","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2422"},"modified":"2018-11-02T19:46:37","modified_gmt":"2018-11-03T00:46:37","slug":"handlebars-how-to-use-templates","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/10\/20\/handlebars-how-to-use-templates\/","title":{"rendered":"Handlebars: How to use templates"},"content":{"rendered":"

Handlebars supports multiple templates in the same Single Page Application. To use templates with Handlebars, you must define a template id in the opening Handlebars script tag. For example, in this case the name of the template is “verse-set-grid”:<\/p>\n

<script id=\"verse-set-grid\" type=\"text\/x-handlebars-template\"><\/pre>\n
The pattern for a template is:<\/p>\n
<!-- 1. Opening script tag with the name of the template set in the id -->\r\n<script id=\"verse-set-grid\" type=\"text\/x-handlebars-template\">\r\n\r\n<!-- 2. The body of the template where all of the Handlebars substitutions are made. -->\r\n...\r\n...\r\n\r\n<!-- 3. The closing script tag -->\r\n<\/script><\/pre>\n
Here is a complete template example. Inside the < script > tags is the handlebars template definition. Somewhere else on the page, in this case following the template definition, is the target div (called\u00a0“verse-set-grid” ). When the handlebars template is compiled it will be placed inside the specified target div.<\/p>\n
<!-- BEGIN verse-set-grid template -->\r\n<script id=\"verse-set-grid\" type=\"text\/x-handlebars-template\">\r\n{{#each this}}\r\n<div class=\"verse-set\" id=\"{{setID}}\">\r\n  <div class=\"verse-set-header\"><span>{{setTitle}}<\/span><\/div>\r\n  <div class=\"verse-set-box\">\r\n\t<ul>\r\n\t  {{#each verses}}\r\n\t  <li>{{verseRef}}<div class=\"view-verse-text\">{{verseText}}<\/div>\r\n\t  {{\/each}}\r\n\t<\/ul>\r\n   <\/div>\r\n  <div class=\"play-button\">Play This Set<\/div>\r\n<\/div>\r\n{{\/each}}\r\n<\/script>\r\n<!-- END verse-set-grid template -->\r\n\r\n<!-- Target div: this is where the handlebars template will appear on the page -->\r\n<div class=\"verse-set-grid\"><\/div><\/pre>\n
Now the second part of getting templates to work in Handlebars is the behind the scenes steps in JavaScript.<\/p>\n
Step 1: Access the template via jQuery<\/strong><\/h4>\n
Notice the jQuery selector here is targeting the template ID “verse-set-grid”, not the div class with the same name:<\/p>\n
let verseSetsGrid = $('#verse-set-grid').html();<\/pre>\n
Step 2: Compile the template with Handlebars.compile
\n<\/strong><\/h4>\n
let verseSetsGridCompiled = Handlebars.compile(verseSetsGrid);<\/pre>\n
Step 3: Get the data that Handlebars will use for the template substitutions
\n<\/strong><\/h4>\n
let verseSetsData = []\r\nlet verseSetsData = JSON.parse(result)<\/pre>\n
Step 4: Pass the data to the compiled Handlebars object, which then places it in a new html variable
\n<\/strong><\/h4>\n
let html = verseSetsGridCompiled(verseSetsData);<\/pre>\n
Step 5: Use jQuery to place the updated html back into the template DOM
\n<\/strong><\/h4>\n
Notice the selector target here is the ‘.verse-set-grid’ class<\/em>, not id<\/em>! This is the div that contains the verse-set-grid template.<\/p>\n
$('.verse-set-grid').html(html);<\/pre>\n
All five steps together looks like this:<\/p>\n
\/\/ Step 1\r\nlet verseSetsGrid = $('#verse-set-grid').html();\r\n\/\/ Step 2\r\nlet verseSetsGridCompiled = Handlebars.compile(verseSetsGrid);\r\n\r\n\/\/ Step 3\r\nlet verseSetsData = []\r\n\/\/ This is an AJAX query that calls a PHP function to return MySQL query results\r\n$.get(cardSets, args, function(result)\r\n{\r\n   let verseSetsData = JSON.parse(result)\r\n   \/\/ Step 4\r\n   let html = verseSetsGridCompiled(verseSetsData);\r\n   \/\/ Step 5\r\n   $('.verse-set-grid').html(html);\r\n});<\/pre>\n
 <\/p>\n
For more information about Handlebars templates, see:
\nhttp:\/\/handlebarsjs.com\/<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Handlebars supports multiple templates in the same Single Page Application. To use templates with Handlebars, you must define a template id in the opening Handlebars script tag. For example, in this case the name of the template is “verse-set-grid”: <script id=”verse-set-grid” type=”text\/x-handlebars-template”> The pattern for a template is: <!– 1. Opening script tag with the … Continue reading Handlebars: How to use templates<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[179,44],"tags":[65,180,45,123],"class_list":["post-2422","post","type-post","status-publish","format-standard","hentry","category-handlebars","category-javascript-language","tag-ajax","tag-handlebars-js","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2422"}],"version-history":[{"count":11,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2422\/revisions"}],"predecessor-version":[{"id":2436,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2422\/revisions\/2436"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}