commit<\/code>-ing and diff<\/code>-ing are much faster and (can be) entirely local (i.e., not requiring a network connection).<\/p>\nHandlebars.js<\/a> is a Javascript library for building simple, clean logic-less templates based on the Mustache Templating Language<\/a>. The focus is on keeping the code (logic) and the view separate.\n<\/p>\n2. Getting a Handle on Things<\/h2>\n
Let’s start by creating a super-simple Handlebars-powered page. We can get started very simply by creating a basic HTML page and including the Handlebars library in the head<\/code> section of the page:<\/p>\nAdding the Handlebars library<\/em><\/span><\/p>\n<script type=\"text\/javascript\"\n src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/handlebars.js\/4.0.11\/handlebars.min.js\">\n<\/script>\n<\/pre>\nNow in the body of the page we can add the (very basic) Handlebars template, starting with a version of the Hello World!<\/em> example (what else?):<\/p>\nDefining our Handlebars template<\/em><\/span><\/p>\n <script id=\"hello-world-template\" type=\"text\/x-handlebars-template\">\n <p>Hello {{adj}} world!<\/p>\n <\/script>\n<\/pre>\nAs you may have already noticed, a lot of the text inside the script<\/code> tag is plain HTML. It’s the {{adj}}<\/code> part that is interesting: it’s where the Handlebars magic happens. It is what is called an expression<\/strong>: Handlebars will replace that expression with its value when it is run.<\/p>\nIt is important to note two things here:<\/p>\n
\n- The template must be placed within
script<\/code> tags, otherwise the browser might modify it<\/a>.<\/li>\n- The
type<\/code> of the script<\/code> tag must be text\/x-handlebars-template<\/code> so that the browser doesn’t try to parse the template as Javascript (which it isn’t).<\/li>\n<\/ol>\nHaving created the template, we now need to:<\/p>\n
\n- Compile<\/strong> the template.<\/li>\n
- Create a context<\/strong> to use for the evaluation.<\/li>\n
- Evaluate the template given its context and then insert the output into the HTML page.<\/li>\n<\/ol>\n
Here is the listing of the complete page:<\/p>\n
index.html<\/em><\/span><\/p>\n<html>\n <head>\n <title>Getting Started with Handlebars<\/title>\n <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/handlebars.js\/4.0.11\/handlebars.min.js\"><\/script>\n <\/head>\n <body>\n \n <script id=\"hello-world-template\" type=\"text\/x-handlebars-template\">\n <p>Hello {{adj}} world!<\/p>\n <\/script>\n \n <div id=\"content\"><\/div>\n\n <script type=\"text\/javascript\">\n var source = document.getElementById(\"hello-world-template\").innerHTML;\n var template = Handlebars.compile(source);\n var context = {adj: \"awesome\"};\n document.getElementById(\"content\").innerHTML = template(context);\n <\/script>\n <\/body>\n<\/html>\n<\/pre>\nLet’s look at the code in lines 15-18:<\/p>\n
\n- Line 15:<\/strong> read the contents of the template<\/li>\n
- Line 16:<\/strong> compile the template<\/li>\n
- Line 17:<\/strong> define our context<\/li>\n
- Line 18:<\/strong> execute the template with the context to get the compiled HTML & insert it into the page<\/li>\n<\/ul>\n
If you load this page in your browser you will see the message Hello awesome world!<\/em> You have now successfully created your first Handlebars template. Congratulations!<\/p>\n3. Did You Git it?<\/h2>\n
Now that we have created something worthwhile, why not put it under version control (we’re going to want to change it, aren’t we)? To get started, let’s initialize a Git repository in the directory where you have just created the index.html<\/em> file.<\/p>\n$ cd $HOME\/Code\/git-handlebars\n$ git init\nInitialized empty Git repository in $HOME\/Code\/git-handlebars\/.git\/\n<\/pre>\nHaving initialized a Git repository, let’s take a look at what’s the current status:
<\/div> <\/div><\/p>\n$ git status\nOn branch master\n\nNo commits yet\n\nUntracked files:\n (use \"git add ...\" to include in what will be committed)\n\n index.html\n\nnothing added to commit but untracked files present (use \"git add\" to track)\n<\/pre>\nWhat’s that? Git is telling is that we haven’t committed anything yet and it is also helpfully giving us the command to do so (git add<\/code>)!! Also, Git has shown us which file(s) is(are) “untracked” (not currently under Git’s version control). Let’s take are of that:<\/p>\n$ git add index.html\n<\/pre>\nOk, so Git was very quiet this time. Let’s check on the status again:<\/p>\n
$ git status\nOn branch master\n\nNo commits yet\n\nChanges to be committed:\n (use \"git rm --cached <file>...\" to unstage)\n\n new file: index.html\n<\/pre>\nWe can see that Git now knows that index.html<\/code> is a new file. To have Git start tracking changes to this file, let’s commit<\/code> it:<\/p>\n$ git commit -m \"My first Handlebars template\"\ngit commit -m \"My first Handlebars template\"\n[master (root-commit) f0787dd] My first Handlebars template\n 1 file changed, 21 insertions(+)\n create mode 100755 index.html\n\n$ git status\nOn branch master\nnothing to commit, working tree clean\n<\/pre>\nWe have now added our first file to the Git repository and then we ran git status to confirm that we had a “clean” working tree<\/a>.<\/p>\n4. Handle it With Helpers<\/h2>\n
In Handlebars you can’t directly write Javascript inside a template. Does that mean Handlbars is limited to doing just variable substitutions? Not at all! Handlebars lets you use helpers<\/strong>, Javascript fuctions that you can call from inside your templates that help you create complex and reusable code. Calling a helper is as simple as using its name: {{helpername}}<\/code>. You can also pass in variables by listing them after the helper’s name: {{helpername arg1 arg2}}<\/code>. Let us update our little experiment with this new-found knowledge. The updated template looks like:<\/p>\nUpdated template<\/em><\/span><\/p>\n<script id=\"hello-world-template\" type=\"text\/x-handlebars-template\">\n <h2>Hello {{adj}} world!<\/h2>\n\n <p>Now let's add some {{bold 'bold text'}} to this page.<\/p>\n<\/script>\n<\/pre>\nWe define our helper in a separate code.js file:<\/p>\n
code.js<\/em><\/span><\/p>\nHandlebars.registerHelper('bold', function(str) {\n str = str || '';\n return '<strong>' + str + '<\/strong>';\n});\n<\/pre>\nHaving made our changes, let’s take a look at what Git has to say:<\/p>\n
$ git status\nOn branch master\nChanges not staged for commit:\n (use \"git add <file>...\" to update what will be committed)\n (use \"git checkout -- <file>...\" to discard changes in working directory)\n\n modified: index.html\n\nUntracked files:\n (use \"git add <file>...\" to include in what will be committed)\n\n code.js\n\nno changes added to commit (use \"git add\" and\/or \"git commit -a\")\n<\/pre>\nAs expected, Git shows us that we have modified our index.html<\/code> file and added a new code.js<\/code> file. Let’s take a look at what’s changed in the index.html<\/code> file:<\/p>\n$ git diff index.html\ndiff --git a\/index.html b\/index.html\nindex 8060315..f0b128f 100755\n--- a\/index.html\n+++ b\/index.html\n@@ -2,11 +2,14 @@\n <head>\n <title>Getting Started with Handlebars<\/title>\n <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/handlebars.js\/4.0.11\/handlebars.min.js\"><\/script>\n+ <script type=\"text\/javascript\" src=\"code.js\"><\/script>\n <\/head>\n <body>\n\n <script id=\"hello-world-template\" type=\"text\/x-handlebars-template\">\n- <p>Hello {{adj}} world!<\/p>\n+ <h2>Hello {{adj}} world!<\/h2>\n+\n+ <p>Now let's add some {{bold 'bold text'}} to this page.<\/p>\n <\/script>\n\n <div id=\"content\"><\/div>\n<\/pre>\nThat’s great! Everything is as expected. Now let’s commit<\/code> the changes we have just made:<\/p>\n$ git add index.html code.js\n\n$ git commit -m \"Adding a helper to our Handlebars code\"\n[master e9dd43a] Adding a helper to our Handlebars code\n 2 files changed, 8 insertions(+), 1 deletion(-)\n create mode 100755 code.js\n\n$ git status\nOn branch master\nnothing to commit, working tree clean\n<\/pre>\n5. The Great Escape<\/h2>\n
Having committed our code, let’s open it in a browser and take a look at it. This is what it looks like:<\/p>\n
![\"Git](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2018\/08\/JcgGitHandlebars-01-EscapedHtmlCode-wm.png\")
<\/a>Oops! The angle brackets of HTML have been escaped!<\/figcaption><\/figure>[ulp id=’pzgfvmZhgslwSymm’]<\/p>\nOh no, Handlebars escaped the angle brackets of our template!<\/p>\n
The solution to this particular issue is simple in Handlebars: use triple curly braces<\/strong> (aka triple-stash<\/em>; {{{...}}}<\/code>) instead of double curly braces to tell Handlebars to not escape<\/strong> the generated values:<\/p>\nUse triple-stash to avoid HTML escaping<\/em><\/span><\/p>\n<script id=\"hello-world-template\" type=\"text\/x-handlebars-template\">\n <h2>Hello {{adj}} world!<\/h2>\n\n <p>Now let's add some {{{bold 'bold text'}}} to this page.<\/p>\n<\/script>\n<\/pre>\nHaving made the above change, we now have to check it into Git. We can be smart about this and use git amend<\/code> to change the previous commit rather than having to create a new one:<\/p>\n$ git commit --amend --no-edit index.html\n\n$ git status\nOn branch master\nnothing to commit, working tree clean\n\n$ git log\ncommit 04e0f19ae6fbdf0113bd8a2aa3ba94d34a3d2d6c (HEAD -> master)\nAuthor: somebody\nDate: somedate\n\n Adding a helper to our Handlebars code\n\ncommit ef6c3bc053d2ac5ab3dc244a614255e8ed4246ed\nAuthor: somebody\nDate: somedate\n\n My first Handlebars template\n<\/pre>\nHere’s what we just did:<\/p>\n
\n- The
git commit --amend<\/code><\/a> command amends the previous commit rather than creating a new one. This allows us to correct our mistake quietly and cleanly. NB: running amend<\/code> like this is not safe on public commits<\/span> (explanation taken from [1]<\/a>).<\/li>\n- The
--no-edit<\/code> option tells Git that we don’t want to edit the comment of the previous Git commit.<\/li>\n- We checked the status to ensure we had a clean working directory.<\/li>\n
- We used
git log<\/code><\/a> to verify that there are still only 2 commits in the repository’s history, not the three that would have been present had we not used amend<\/code>.<\/li>\n<\/ul>\nOur page now looks like we actually wanted it to look:<\/p>\n
![\"Git](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2018\/08\/JcgGitHandlebars-02-UnescapedHtmlCode-wm.png\")
<\/a>![\"Git](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2018\/08\/JcgGitHandlebars-03-WithBlockExpression-wm.png\")
<\/a>