31

I changed my handlebar template's extension and referred to the same in the function which called handlebarjs' compile function.

It worked perfectly fine with no issues.

But I'm curious to know if anyone else tried that? Please let me know if you think this could cause problems down the road for any reason.

For some reason I feel that the very extension .handlebars is a bit long. I prefer to keep it to a max of 4 chars ... something like .txt or .html.

Please let me know if you see any issues with this approach.

For example, I renamed login.handlebars to login.html

In the getTemplate function (as shown below), I will call this template for compilation

function getTemplate(name) {

if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
    $.ajax({
       url : "templates/" + name + ".html",
       success : function(data) {
       if (Handlebars.templates === undefined) {
           Handlebars.templates = {};
       }
       Handlebars.templates[name] = Handlebars.compile(data);
       },
      async : false
    });
    }
    return Handlebars.templates[name];
}
eshcol
  • 549
  • 1
  • 4
  • 10
  • Some code to show exactly how you are implementing handlebars templates would help us decide if this is a good route to take. – srquinn Jan 17 '14 at 21:28
  • 4
    I'd recommend against `.html` as a Handlebars template often isn't really valid HTML and someone might try to map the extension to a MIME type. I've been using `.hbs`. – mu is too short Jan 17 '14 at 22:09
  • 1
    I agree with mu is too short, .hbs is one of the appropriate extension for handlebars templates, as seen here : https://github.com/github/linguist/blob/master/lib/linguist/languages.yml – Akaryatrh Jan 17 '14 at 22:18
  • We tried using `.json` for handlebars data that compiled to JSON, however, we had many problems with linters and databases reporting that it wasn't valid JSON and changed to `.json.hbs` – Kevin Murray Feb 15 '22 at 13:40

1 Answers1

47

My shop uses .handlebars, along with Require.js and Alex Sexton's require-handlebars plug-in, and it all works without issue. The far more common suffix however, and the default one in that plug-in I just mentioned, is .hbs (presumably because .hbs is a 3-character extension not already taken by another file type).

You can for example use .hbs, .handlebars, or even a different extension for that matter, and it should work just fine with any sort of library (eg. Require) where the suffix could actually matter. There are no guarantees of course, but because there is no official extension library authors generally know better than to hard-code one.

I would caution against using .htm or .html for these files though ... unless you have a really picky IDE. Most IDEs can be set to treat .hbs as if it were an HTML files, for syntax coloring and what not. If your's can't, then .htm might make sense. Otherwise I'd keep the file extension distinct, so that you can easily distinguish between the two types of files.

Kenny
  • 571
  • 5
  • 18
machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Thank you. This helps. By the way, you mentioned about making the syntax coloring for .hbs like .html. I am using Sublime Text 3. Can you please point me to where I can get info of how to align .hbs syntax like .html? – eshcol Jan 20 '14 at 17:11
  • There's this SO (for Sublime 2, but I imagine it's similar): http://stackoverflow.com/questions/8088475/how-to-customise-file-type-to-syntax-associations-in-sublime-2 – machineghost Jan 21 '14 at 03:09
  • 5
    I would recommend `.html.hbs`, and configure editor/IDE to treat `.html.hbs` as HTML, `.json.hbs` as JSON, `.xml.hbs` as XML, and so on. – Franklin Yu Oct 26 '18 at 20:42