Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Josh Hicks
Josh Hicks
14,146 Points

Best practices for storing handlebars templates?

Is it better to store my hbs templates in the index.html via script tags, or strore it in a separate templates.js file to store them and why?

4 Answers

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

Dave McFarland - Andrew Chalkley: Any Ideas?

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

I haven't used handlebars...but it really depends on the scenario you're using them.

But In general I feel In an external file would be appropriate. The browser can cache the file and can be reused on multiple pages it's included in.

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

I was thinking that too. On one level you are being more semantic by keeping all your content in and html file, but on another, it's a lot less modular than having it in separate js files that you can easily find and edit. I think the docs recommend using the script tags in your html though. Thanks for your advice.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Josh Hicks

If you store the templates in an external file, you'll need to use AJAX to load them. Because the templates have plain HTML in them, you can't just put them in an external .js file and load them as you would a regular script.

Here's a good solution for using AJAX to load templates: http://stackoverflow.com/questions/23013447/how-to-define-handlebar-js-templates-in-an-external-file

Josh Hicks
Josh Hicks
14,146 Points

Oh, that makes sense. I am mainly thinking in an EMBER context, and there are hbs loaders out there that do pretty much the same thing. From a performance point of view would you say that's better than placing them all in the index.html file?

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

Actually I just realized that pre-compilation is actually the best thing to do for speeding up performance. I'll have to do more research on getting that setup.