Loading templates in a single file for backbone / underscore

Question

I have a backbone application, which is served by a symfony2 server.

I have many backbone views and each has several templates that are rendered at different times using underscore's templating engine.

I am trying to figure out how to serve the underscore templates to the client with maximum efficiency.

Up until now I've written all of the templates in twig, and then rendered them as inline script tags to the response HTML during the initial request. This resulted in a long response time from the server during the first time a user enters my application.

output example:

<html>
<head>
   ...
</head>
<body>
    <script type="text/template" id="template1">
        <div class="example">
            <%= someparam %>
        </div>
    </script>
    <script type="text/template" id="template2">
        <div class="anotherExample">
            <%= otherparam %>
        </div>
    </script>
    ...
    ...
    ...
</body>
</html>

Alternatives

Now I'm looking for a better way to load these templates. perhaps by getting them in a second request in a single file, like an external JS file. But with anything I've tried, I have found it difficult to either access individual templates (like referencing them by id) or to keep them all in an efficient structure (in a single file, and without too much string manipulation or too many http requests).

TL;DR

How would one load many underscore templates?

jevakallio jevakallio · Accepted Answer · 2012-12-27T12:23:05

You could consider the JST approach, which is to concatenate the templates into a single javascript file. The pattern is described in this Backbone Patterns tutorial.

I'm not familiar with Symfony/Twig, so I don't know if there is any tooling available. Based on your question I would guess it's easy to use your existing tools to render the templates into a javascript file instead of the HTML document.

Loading templates in a single file for backbone / underscore

TL;DR

2 Answers