CODEWITHSUNDEEP
javascriptjquerybackbone.jsunderscore.jstemplating
Rodik
Rodik

Reputation: 4092

Loading templates in a single file for backbone / underscore

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?

Upvotes: 3

Views: 2959

Answers (2)

kupriyanenko
kupriyanenko

Reputation: 374

I think better way for you - it's precompile template, try to use jsttojs, it will help you get single file with all you templates.

for example, from command line

jsttojs templates compiled/templates/index.js --ext mustache --watch

or use solution for grunt, grunt-jsttojs

Upvotes: 1

jevakallio
jevakallio

Reputation: 35890

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.

Upvotes: 1

Related Questions