Take the 2-minute tour ×

I have a backbone.js application with multiple models, views, collections and templates (in a script tag with type text/template with an ID which the views use to load the template in using _.template($(id).html())).

Currently, all of the above are in a single file, which makes it quite ugly. This is an offline application (i.e, its loaded from the local filesystem and talks to a web server which allows cross-origin requests). I've been trying to figure out how to move the views, models and templates to separate files, I tried just moving the views and models out to views.js and models.js, but the views depend on the templates, and the templates can't be put into views.js (as its a JS file, and therefore can't have script tags..).

My only solution at this point seems to be moving the templates into global variables, which would be fine except for the javascript string escaping/multi line strings that would be required..

How is this usually handled?


share|improve this question
add comment

3 Answers

Use RequireJS to package your views and models up into modules, and RequireJS will take care of the dependency resolution for you. You can get down to one view or model per file that way, too, instead of putting them all in one views.js or models.js.

Then, use the text! plugin to store your templates in text files, and require them like normal modules.

define(function (require, exports, module) {
  var templateText = require("text!./person.tmpl");
  var $ = require("jquery");

  exports.PersonView = Backbone.View.extend({
    render: function () {
share|improve this answer
That makes sense, but I foresee one problem.. some of my templates reference other templates, i.e, I have a JS section within the template that calls another template to generate a DOM element for instance (which is then added to the current template using print()), any idea about how to get that to work? –  Kim Sun-wu Jan 27 '12 at 22:14
+1 Don't even dare starting without picking up requirejs or some other form of module management! –  Tom Tu Jan 27 '12 at 22:31
Not sure how to handle that... templates are supposed to contain as little JavaScript as possible for exactly this kind of reason. –  Domenic Jan 27 '12 at 23:22
Sounds like that logic could / should be handled inside the view. Maybe directly via "append" and the like, maybe via an additional parameter which is passed to the "main template" or maybe via a break down in separate views. –  SunnyRed Jan 28 '12 at 2:59
add comment

Take a look at these starter applications that use Backbone and RequireJS.

This one has Backbone.LocalStorage in it, which could help you with your offline stuff.


This other one is just a simple starter for building an app...


They way you can handle templates with is...

function($, Backbone, _, model, template){
    var MyView = Backbone.View.extend({
        initialize: function(){
            this.template = _.template(template);
        render: function(){
    return new MyView();    


share|improve this answer
add comment

You might want to check out the Backbone boilerplate. This add a nice modular structure to your backbone app without polluting the global namespace, and provides a simple template caching.

It's really easy to change the template renderer to someting different that JST. Even if the general idea can be followed without any server side requirements, the boilerplate provides a basic node.js app as well.

share|improve this answer
add comment

Your Answer


