Using doT.js with require.js - backbone.js

Question

I'm using an authentication example from here https://github.com/alexanderscott/backbone-login and instead of using underscore templates I would like to use doT.js templates.
I've added the doT.js source to the lib directory and my config.js looks like this
if (typeof DEBUG === 'undefined') DEBUG = true;
require.config({
baseUrl: '/assets',
paths: {
//'jquery' : 'http://code.jquery.com/jquery-1.10.2.js',
'jquery' : 'assets/lib/jquery',
'underscore' : 'assets/lib/underscore', // load lodash instead of underscore (faster + bugfixes)
'backbone' : 'assets/lib/backbone',
'bootstrap' : 'assets/vendor/bootstrap/js/bootstrap',
'doT' : 'assets/lib/doT',
'text' : 'assets/lib/text',
'parsley' : 'assets/lib/parsley'
},
// non-AMD lib
shim: {
//'jquery' : { exports : '$' },
'underscore' : { exports : '_' },
'backbone' : { deps : ['underscore', 'jquery'], exports : 'Backbone' },
'bootstrap' : { deps : ['jquery'], exports : 'Bootstrap' },
'parsley' : { deps: ['jquery'] },
'doT' : { exports : 'doT'}
}
});
require(['main']); // Initialize the application with the main application file.
my app.js looks like this
define([
"jquery",
"underscore",
"backbone",
"doT",
"utils"
],
function($, _, Backbone, doT) {
var app = {
root : "/", // The root path to run the application through.
URL : "/", // Base application URL
API : "/api", // Base API URL (used by models & collections)
// Show alert classes and hide after specified timeout
showAlert: function(title, text, klass) {
$("#header-alert").removeClass("alert-error alert-warning alert-success alert-info");
$("#header-alert").addClass(klass);
$("#header-alert").html('<button class="close" data-dismiss="alert">×</button><strong>' + title + '</strong> ' + text);
$("#header-alert").show('fast');
setTimeout(function() {
$("#header-alert").hide();
}, 7000 );
}
};
$.ajaxSetup({ cache: false }); // force ajax call on all browsers
//alert(doT.template("what up {{=it.name}}"),{'name': 'John'});
// Global event aggregator
app.eventAggregator = _.extend({}, Backbone.Events);
return app;
});
and HeaderView.js looks like this
define([
"app",
"text!templates/header.html",
"utils",
"bootstrap"
], function(app, HeaderTpl){
var HeaderView = Backbone.View.extend({
template: doT.template(HeaderTpl), //_.template(HeaderTpl),
initialize: function () {
_.bindAll(this);
// Listen for session logged_in state changes and re-render
app.session.on("change:logged_in", this.onLoginStatusChange);
},
events: {
"click #logout-link" : "onLogoutClick",
"click #remove-account-link" : "onRemoveAccountClick"
},
onLoginStatusChange: function(evt){
this.render();
if(app.session.get("logged_in")) app.showAlert("Success!", "Logged in as "+app.session.user.get("username"), "alert-success");
else app.showAlert("See ya!", "Logged out successfully", "alert-success");
},
onLogoutClick: function(evt) {
evt.preventDefault();
app.session.logout({}); // No callbacks needed b/c of session event listening
},
onRemoveAccountClick: function(evt){
evt.preventDefault();
app.session.removeAccount({});
},
render: function () {
if(DEBUG) console.log("RENDER::", app.session.user.toJSON(), app.session.toJSON());
this.$el.html(this.template({
logged_in: app.session.get("logged_in"),
user: app.session.user.toJSON()
}));
return this;
},
});
return HeaderView;
});
when i load the page I get the error
Uncaught ReferenceError: doT is not defined
I can call the doT.template() function in the app.js file and I can see that doT.js is loaded in my network tab but when I try and use it in the HeaderView.js I keep getting the error. I am new to require.js so I'm sure I'm misunderstanding how it works.

Answer 1

Looking at the source of doT I see that it calls define by itself. So you do not need a shim configuration for it. Providing a shim for a module that calls define can confuse RequireJS.
Moreover, in the case at hand here, I see that if doT detects that it is an AMD environment (which RequireJS is), then it does not define itself in the global space as doT. So your HeaderView.js file will have to have doT among the required modules. Something like:
define([
"app",
"text!templates/header.html",
"doT",
"utils",
"bootstrap"
], function(app, HeaderTpl, doT){