Backbone: managing templates

2024/2/27 8:35:43

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?


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>
  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).

Related Q&A

jQuery UI datepicker display without action

Is it possible to display jQuery UI datepicker without having to click on anything? I want the datepicker to be visible when the window loads. Or is this not possible? If not is there another plugin …

What is the correct JavaScript operator precedence table?

If I run the following code on Firefox, I get an error: new Number.toString;But according to MDN, new Number should evaluate first. So the table is not correct, I think. Let us take a look at MSDN. Abo…

Handle XMLHttpRequest response with large data

Using Chrome, I setup a XMLHttpRequest:const xhr = new XMLHttpRequest();, url, true); ... xhr.onreadystatechange = () => {if (xhr.readyState === XMLHttpRequest.DONE) {if (isStatusCod…

Select2 - Searching wildcard matches

I am using Select2 to style my select box and add functionality and I am wondering how I can make the search rules more lenient. Currently if I have "New Mexico" in the dropdown, I can search…

how to get Extjs 4 stores request data on beforeload event?

Im trying to get request data params beforeload event on store. I can see the operation object contains the request data but I cant seems to get it from operation objectExt.create(, {auto…

Javascript object lost constructor when the prototype was changed

In below codevar A = function() {}; var a = new A(); var b = new A();A.prototype = {};var c = new A(); console.log(a.constructor === b.constructor); console.log(a.constructor === c.constructor);output …

Kendo DropDownList in Grid shows value after selection

Im trying to use a drop-down list in my grid. This is my grid definition:$("#grid").kendoGrid({editable: true,dataSource: {data: data,schema: {model: {fields: {Name: {type: "string"…

JavaScript - Identifier has already been declared

Having an issue with getting a register/ login form to work on HTML using localStorage. As part of my assignment, I cannot use databases or php even though these are easier. Specifically the issue is o…

editable Text option in kinetic js

I want to add Textbox or editable element to give the user the option to edit the text.This is my current code:var text = new Kinetic.Text({text: "Sample Text", ---> i want to edit this te…

jQuery loaded async and ready function not working

In order to optimize the load of my document, I use to load jQuery async like that <script async type="text/javascript" src="js/jquery-1.12.3.min.js"></script>Then I cal…