{"id":146247,"date":"2018-10-06T12:04:55","date_gmt":"2018-10-06T12:04:55","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=146247"},"modified":"2018-10-06T12:08:53","modified_gmt":"2018-10-06T12:08:53","slug":"handlebars-templating-engines","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/","title":{"rendered":"Handlebars Templating engines"},"content":{"rendered":"<p>In this blog we will read something about Handlebars templating engines.Whenever we need to dynamic binding of data in html or to manipulate DOM with dynamic data we prefer templating engines. Here lets have an short intro of Handlebar templating engine in our project.<br \/>\n<code><\/p>\n<pre class=\"brush:php\">\r\n<div>\r\n    <ul class=\"vendors\">\r\n        \r\n            {{#each this}}\r\n                <li>\r\n                    <p>Name :  {{ name }} <\/p>\r\n                    <p>Email :  {{ email }} <\/p>\r\n                    <p>Website :  {{ website }} <small>( {{company.name}} )<\/small><\/p>\r\n                    <p>Address :  {{ postalAddress address }} <\/p>\r\n                <\/li>\r\n            {{\/each}}\r\n        \r\n    <\/ul>\r\n<\/div>\r\n\r\n    (function(){            \r\n        var Handles = {\r\n            init : function () {\r\n                this.url = \"https:\/\/jsonplaceholder.typicode.com\/users\";\r\n                this.fetch();\r\n            },\r\n            fetch : function(){                    \r\n                $.getJSON( this.url , function( data ){\r\n                    var source   = $(\"#testing-template\").html(); \r\n                    var temp = Handlebars.compile(source); \/\/ passing template to handlebar to compile ,returns function\r\n                    $('ul.vendors').append(temp(data)); \/\/ pass json data to function which contains values of the variable of template,return desired html content\r\n                });\r\n                \/\/We are registering a custom helper here which will return postal address of vendors .\r\n                Handlebars.registerHelper('postalAddress', function(address) {\r\n                    return address.street + \" \" + address.city + \" \" + address.zipcode;\r\n                });\r\n            }\r\n        };\r\n        Handles.init();\r\n    })();\r\n\r\n<\/pre>\n<p><\/code><\/p>\n<p>What we did here is we get template from its id and pass it to Handlebars , handlebar receives the template with variable and compile it to function , then we provide json data which contains value of variables used in template so that they can be replaced.<br \/>\nHere we are calling Handlebars.compile to compile our handlebars but it is prefarable to compile handlebars before rendering than to compile it in browser.<\/p>\n<p>In above code i register a custom helper using Handlebars.registerHelper there are some in built helpers too such as <\/p>\n<ul>\nif<br \/>\neach<br \/>\nunless etc<\/ul>\n<p>In order to precompile your handlebars here are the steps :<br \/>\n1. Open node cmd and run command as : npm install handlebars -g<br \/>\nIt will install handlebar globally.<br \/>\n2. Create a file naming testing-template.handlebar and write your template related code in it as :<br \/>\n<code><\/p>\n<pre class=\"brush:php\">\r\n<ul>\r\n{{#each this}}\r\n    <li>\r\n        <p>Name :  {{ name }} <\/p>\r\n        <p>Email :  {{ email }} <\/p>\r\n        <p>Website :  {{ website }} <small>( {{company.name}} )<\/small><\/p>\r\n    <\/li>\r\n{{\/each}} \r\n<\/ul>\r\n<\/pre>\n<p><\/code><br \/>\n3. Traverse path upto your file and run command : handlebars -f test.js testing-template.handlebar . It will create a js file <\/p>\n<p>4. Improve your previous html code and include this js file as :<br \/>\n    a. Include previously created js file in your code.<br \/>\n    b. put this code in your html body  :<br \/>\n<code><\/p>\n<pre class=\"brush:php\">\r\n<div>\r\n        <ul class=\"vendors\">\r\n        <\/ul>\r\n    <\/div>\r\n    \r\n        (function(){            \r\n            var Gdistance = {\r\n                init : function () {\r\n                    this.url = \"https:\/\/jsonplaceholder.typicode.com\/users\";\r\n                    this.fetch();\r\n                },\r\n                fetch : function(){                    \r\n                    $.getJSON( this.url , function( data ){\r\n                        var template = Handlebars.templates['ankita-template.handlebar'], \/\/ your template minus the .js\r\n                        context = data, \/\/ your data\r\n                        html    = template(context);\r\n                        $('ul.vendors').html(html);\r\n                    });\r\n                }\r\n            };\r\n            Gdistance.init();\r\n        })();\r\n    \r\n<\/pre>\n<p><\/code><\/p>\n<p>For detail you can refer : <a href=\"http:\/\/handlebarsjs.com\/\">Handlebars<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will read something about Handlebars templating engines.Whenever we need to dynamic binding of data in html or to manipulate DOM with dynamic data we prefer templating engines. Here lets have an short intro of Handlebar templating engine in our project. {{#each this}} Name : {{ name }} Email : {{ email <a href=\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":105,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1496],"tags":[],"class_list":["post-146247","post","type-post","status-publish","format-standard","hentry","category-cs-cart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Handlebars Templating engines - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handlebars Templating engines - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog we will read something about Handlebars templating engines.Whenever we need to dynamic binding of data in html or to manipulate DOM with dynamic data we prefer templating engines. Here lets have an short intro of Handlebar templating engine in our project. {{#each this}} Name : {{ name }} Email : {{ email [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-06T12:04:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-06T12:08:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ankita Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ankita Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\"},\"author\":{\"name\":\"Ankita Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/75ca402e5347b60b1f59c92817945a16\"},\"headline\":\"Handlebars Templating engines\",\"datePublished\":\"2018-10-06T12:04:55+00:00\",\"dateModified\":\"2018-10-06T12:08:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\"},\"wordCount\":238,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"articleSection\":[\"Cs Cart\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\",\"url\":\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\",\"name\":\"Handlebars Templating engines - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2018-10-06T12:04:55+00:00\",\"dateModified\":\"2018-10-06T12:08:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handlebars Templating engines\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/75ca402e5347b60b1f59c92817945a16\",\"name\":\"Ankita Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4204fab045bd10e8b24b349d88fe38c0213ba6ce1590943e19b084030f631cc6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4204fab045bd10e8b24b349d88fe38c0213ba6ce1590943e19b084030f631cc6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Ankita Singh\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/ankita-singh843\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Handlebars Templating engines - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/","og_locale":"en_US","og_type":"article","og_title":"Handlebars Templating engines - Webkul Blog","og_description":"In this blog we will read something about Handlebars templating engines.Whenever we need to dynamic binding of data in html or to manipulate DOM with dynamic data we prefer templating engines. Here lets have an short intro of Handlebar templating engine in our project. {{#each this}} Name : {{ name }} Email : {{ email [...]","og_url":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-10-06T12:04:55+00:00","article_modified_time":"2018-10-06T12:08:53+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Ankita Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ankita Singh","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/"},"author":{"name":"Ankita Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/75ca402e5347b60b1f59c92817945a16"},"headline":"Handlebars Templating engines","datePublished":"2018-10-06T12:04:55+00:00","dateModified":"2018-10-06T12:08:53+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/"},"wordCount":238,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"articleSection":["Cs Cart"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/","url":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/","name":"Handlebars Templating engines - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2018-10-06T12:04:55+00:00","dateModified":"2018-10-06T12:08:53+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/handlebars-templating-engines\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/handlebars-templating-engines\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Handlebars Templating engines"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/75ca402e5347b60b1f59c92817945a16","name":"Ankita Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4204fab045bd10e8b24b349d88fe38c0213ba6ce1590943e19b084030f631cc6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4204fab045bd10e8b24b349d88fe38c0213ba6ce1590943e19b084030f631cc6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Ankita Singh"},"url":"https:\/\/webkul.com\/blog\/author\/ankita-singh843\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/146247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=146247"}],"version-history":[{"count":11,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/146247\/revisions"}],"predecessor-version":[{"id":146264,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/146247\/revisions\/146264"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=146247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=146247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=146247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}