include a .handlebars or a .hbs file in html

42,892

It's a handlebars template file which is a piece of HTML with handlebars tokens in it. It doesn't matter what the file extension is; it can be anything you want.

To include a handlebars template in your own HTML, you just create the file, give it any name you like, and then include a <script> tag like the one in the example that points to your template file.

One way of using client-side handlebars templates is to include them in script tags (as in your example). The raw template will be available in the DOM, but not made visible and not processed as HTML so it it already available to your code so it can be compiled into a template by your client javascript and then rendered to HTML with a specific set of data.

Handlebars templates can also be in your javascript, built by your javascript, or can be loaded dynamically via Ajax (two other ways of getting them into the client in addition to the <script> tag method).

If you were using handlebars server-side, then the templates can stay on the server and don't need to be put in the page as <script> tags.

Share:
42,892
Millzie
Author by

Millzie

Hi, I'm Millzie, I'm currently learning XML, HTML, CSS, JavaScript, jQuery, EmberJs, HandlebarsJs and PHP. and about year and a 1/2 later I hope to add Java, Objective C, Python, C and 3D modelling to that list. I got into programming because it really is the only profession in which you can start with nothing but a notepad and an imagination and make an entire app or website. Your programming skills really are limited by nothing but your imagination and your willpower.

Updated on May 06, 2020

Comments

  • Millzie
    Millzie almost 4 years

    At the homepage of emberjs.com there is a emberjs & handlebarsjs example of a todo list. On the todo list there is a extension for a .hbs file and I was wondering what is .hbs? And how do I include a .hbs script to HTML? Something like this:

    <script type="text/hbs" src="hbs-file.hbs"></script>
    
    • Chizl
      Chizl almost 4 years
      type="text/x-handlebars-template"
  • Chiranjhivi Ghimire
    Chiranjhivi Ghimire over 5 years
    jfriend00 Use of .hbs extension and .html extension for handlebar template file. No much difference?
  • Igor Alex
    Igor Alex almost 4 years
    @jfriend00 so, there are no benefits of using .hbs over .html?
  • jfriend00
    jfriend00 almost 4 years
    @IgorAlex - There are lots of reasons to use template files if you're using a template engine that will process them. Browsers by themselves don't know what to do with a template file. Browsers know HTML. So, if you're using a template file (like .hbs), then you have to use a template engine to expand them into HTML before handing the content to the browser.