CODEWITHSUNDEEP
javascripthtmlember.jshandlebars.js
Millzie
Millzie

Reputation: 332

include a .handlebars or a .hbs file in html

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>

Upvotes: 15

Views: 52258

Answers (1)

jfriend00
jfriend00

Reputation: 707376

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.

Upvotes: 28

Related Questions