Appendix C. Organizing Templates with AMD and Require.js

Asynchronous Module Definition (AMD) is a JavaScript API used to define modules and load module dependencies asynchronously. It is a fairly new yet very robust concept that many developers are adopting nowadays. In Chapter 7, Organizing Backbone Applications – Structure, Optimize, and Deploy, we covered AMD with Require.js in detail. If you need more details on this library, we recommend you visit http://requirejs.org/ to get a complete overview and then come back to this section.

In general, Require.js treats every file's content as JavaScript. So, we cannot load our template files, if they aren't JavaScript files, in the same manner as JavaScript files. Fortunately for templates, there is a text plugin that allows us to load text-based dependencies. Any file that we load using this file will be treated as a text file and the content that we receive will be a string; it can be used easily with your template methods. To use this plugin, just prepend text! to the file path and the file contents will be retrieved as plain text; to do this, follow this example:

// AMD Module definition with dependencies
define([
    'backbone',
    'underscore',

    // text plugin that gets any file content as text
    'text!../templates/userLogin.html'
  ],
  function (Backbone, _, userLoginTpl) {
    'use strict';

    var UserLogin = Backbone.View.extend({
      // Compile the template string that we received 
      template: _.template(userLoginTpl),
      render: function () {
        this.$el.html(this.template({
          username: 'johndoe',
          password: 'john'
        }));

        return this;
      }
    });

    return UserLogin;
  });

The benefit of using this mechanism is that you can organize your templates by creating separate template files and they are automatically included in your modules. Since this involves asynchronous loading, the files are downloaded via AJAX requests, something we already decided as being a bad idea. However, Require.js comes with an r.js optimization tool that builds the modules and can save these extra AJAX requests by inlining these templates with their respective modules.