I am using Handlebars in a Node/Express project. It works beautifully and its layouts, templates, and partials are a blessing. I have one question, though:
Where would the best place to place to put my JavaScript files import be?
This is the default layout I am currently using…
```
{{title}}
{{{ body }}}
```
For those who may not know, Handlebars will insert my _templates_ where the _{{{ body }}}_ instruction is, which means I can focus on separate templates for different pages without bothering to repeat the same common structure(s).
As is, I get a _NotDefined_ error when I try to run a JS function from the **template** when it loads. That makes sense since the **template** loads before the **layout** has a chance to load my scripts.js (last one to be loaded).
I can place the script loading statements _inside_ the template, but that defeats the purpose of using templates as I would be duplicating code.
And, if I place the script loading statements _early_ in the layout file, say within the **head** tag or immediately after opening the **body** tag, I fear I will have problems with performance.
So, where do you guys put your script loading statements in this situation?
---
If you have scripts in {{{body}}} that depend on the scripts lower in the page, then you either have to defer the running of the injected scripts (e.g. in document onload or equiv) or include your other scripts before {{{body}}}
---
Unfortunately, no. This is a minor hassle of scripts that deal with layout and content. You have to run them ahead of everything else that your page might need for displaying itself. There will be a performance impact, but it won’t be too bad since handlebars is fairly small and optimized. You should ensure any non-templating code runs after page load.