Question

I’m using Handlebars.js, and currently all my templates live inside script tags which live inside .html files housing dozens of other templates, also inside script tags.

<script type="text/template" id="template-1">
  <div>{{variable}}</div>
</script>

<script type="text/template" id="template-2">
  <div>{{variable}}</div>
</script>

<script type="text/template" id="template-3">
  <div>{{variable}}</div>
</script>

...

Then I include this file on the server-side as a partial.

This has the following disadvantages:

1. A bunch of templates are crammed into HTML files.
2. Finding a given template is tedious.

I’m looking for a better way to organize my templates. I’d like each each template to live in its own file. For example:

/public/views/my_controller/my_action/some_template.html
/public/views/my_controller/my_action/some_other_template.html
/public/views/my_controller/my_other_action/another_template.html
/public/views/my_controller/my_other_action/yet_another_template.html
/public/views/shared/my_shared_template.html

Then at the top of my view, in the backend code, I can include these templates when the page loads, like this:

SomeTemplateLibrary.require(
    "/public/views/my_controller/my_action/*",
    "/public/views/shared/my_shared_template.html"
)

This would include all templates in /public/views/my_controller/my_action/ and also include /public/views/shared/my_shared_template.html.

My question: Are there any libraries out there that provide this or similar functionality? Or, does anyone have any alternative organizational suggestions?

Answer 1

I ended up using RequireJS, which pretty much let me do this. See http://aaronhardy.com/javascript/javascript-architecture-requirejs-dependency-management/.