Backbone: managing templates

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?

回答1:

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:

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>
```
Write some code on your server-side to include those HTML files in the main HTML file you send to the client
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).
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).

回答2:

Not sure what you mean by it being unmaintainable. Is it just a long list?

You don't need to keep your templates in the head. They can be at the bottom of your body as well. They just need to be defined before you try to use them.

One thing you might look into, depending on the server technology you are using would be to separate your templates into a different HTML file and include it at runtime.