Home/ Questions/Q 9032195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T07:55:10+00:00

I’m using underscore template engine for an backbone application. As of now I have

  • 0

I’m using underscore template engine for an backbone application. As of now I have over 15 templates in the <head>. Its getting hard to maintain. So far, most of the solutions I seen to manage templates ended up needing them to be js files. That’s also a headache, I prefer them to be html files for editing purposes.

I took a look at requirejs and not sure if I need that since it kinda revolves around a more modular approach that I can’t say I’m using at the moment (although I will soon).

What will be the best way to manage templates and load/cache them as needed?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Personally we needed a robust solution at my company, so we went with:

    • Require.js – for module loading
    • Handlebars – for more powerful templating than Underscore can offer
    • HBS – an excellent require plug-in from Alex Sexton that handles bringing compiled templates in via Require

    With this setup I can keep all of my templates in their own file, and then to use them I have files like this:

    define(['template!path/to/someTemplate'], function(someTemplate) {
    var MyNewView = BaseView.extend({template: someTemplate});
    $('body').append(new MyNewView().render().el);
}

    (and as you might guess we have a base Backbone view called BaseView which uses the view’s template property to render the view).

    Now, all that being said, if you don’t need such a robust setup then Require may not be for you. In that case I would do the following:

    1. Put all of your templates in to one or more HTML files; wrap them in script tags, like so:

      <script id="dummyTemplate" type='text/template'>
<span>I'm a template!</span>
</script>

    2. Write some code on your server-side to include those HTML files in the main HTML file you send to the client

    3. Write a function which takes a template ID, gets the text of that element, compiles it in to a template, and returns that template (maybe cache the compiled templates if you want … of course, with Underscore templates I don’t think you even need compiling, so you can skip all that).

    4. Use your function to access your templates: $("#something").html(templateFunc('dummyTemplate').template())

    This will allow you to store your templates in html files (for syntax coloring), but still access them conveniently in JS. You can also divide your templates between as many files as you want, as long as you can write include logic to bring them in.

    If you do opt for Require though, definitely check out the HBS plugin. And if you haven’t looked at Handlebars templates yet, you might want to; they’re far more powerful than Underscore ones (but like any good templating system, don’t allow for too much logic).

    • 0