{"id":160,"date":"2017-09-09T21:39:14","date_gmt":"2017-09-09T21:39:14","guid":{"rendered":"https:\/\/codingfix.com\/?p=160"},"modified":"2024-09-03T18:03:55","modified_gmt":"2024-09-03T18:03:55","slug":"using-handlebars-percompiled-templates","status":"publish","type":"post","link":"https:\/\/codingfix.com\/using-handlebars-percompiled-templates\/","title":{"rendered":"Using Handlebars precompiled partial templates"},"content":{"rendered":"\n

Handlebars<\/h2>\n\n\n\n

Handlebars is a great piece of software which allows us to keep the frontend of our web application separated by the underlying logic. In fact, Handlebars is a logicless templating engine which compiles our templates on the fly and serves the resulting web page fullfilled with our data. And it’s terribly easy to learn it and to integrate inan existing project! If you don’t know Handlebars or if you want to know it better, please refers to the official documentation page<\/a>.<\/p>\n\n\n\n

Compile or precompile, this is the question…<\/h2>\n\n\n\n

Actually, is not a so difficult question to answer to: precompile for sure! Precompiling your templates has 2 significant advatanges for us:<\/p>\n\n\n\n

    \n
  1. we can serve our web pages faster because one step of templating process has already been done and templates are ready to be used in the website<\/li>\n\n\n\n
  2. we can use handlebars.runtime.js instead of handlebars.js: a reduced version of Handlebars with a smaller footprint, so faster to load<\/li>\n<\/ol>\n\n\n\n

    So we can for sure prefer to precompile our templates, isn’t it? Okay, just put all your templates in a folder we can call (I know it’s not original) templates<\/em>. Our directory tree will be something like this:<\/p>\n\n\n\n

    \n
    application root<\/em><\/sub><\/span>
         – css<\/em><\/sub><\/span>
         – js<\/em><\/sub><\/span>
         – templates<\/em><\/sub><\/span>
              – template1.hbs<\/em><\/sub><\/span>
              – template1.hbs<\/em><\/sub><\/span>
              – template1.hbs<\/em><\/sub><\/span>
        – index.html<\/em><\/sub><\/span><\/div>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Now open a command prompt (or a terminal window) and navigate to the application root<\/em> then type:<\/p>\n\n\n\n

    <\/path><\/path><\/svg><\/span>
    handlebars templates\/> js\/templates.js<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    This command will compile all the files it’ll find within the directory templates<\/em> and it will output the result in the specified file (in this example, in the file templates.js<\/em> hold in the js<\/em> directory.<\/p>\n\n\n\n
    You have now just to add the following line within the head<\/em> tags of your html pages to display your templates:<\/p>\n\n\n\n
    HTML<\/span><\/path><\/path><\/svg><\/span>
    <<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"js\/handlebars.runtime.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"js\/templates.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Fantastic!<\/p>\n\n\n\n
    But, if you’re using partials, this is not enough. Let me remember here what are partials in Handlebars.<\/p>\n\n\n\n
    Partials templates<\/h2>\n\n\n\n
    A wonderful feature of Handlebars is that you can use a template in another template: this kind of “sub-template” is called partial<\/em>. But let me explain why this feature can be useful.<\/p>\n\n\n\n
    To make a long story short, I was developing a small mobile hybrid application to manage my customers and I wanted to have a page to add a new customer and another page to edit an existing customer. This edit page had to:<\/p>\n\n\n\n