Javascript Templates

Javascript Templates provides a simple workflow to add HTML templates to 1 Javascript file as output. You can add your own templates with a custom hook or alter currently available templates.

The main goal of the module is to use your templates within Javascript (for example in underscore.js templates). This prevents you to have any line of HTML within your Javascript code.

Mustache.js-like templates do NOT have my preference because they create <script></script> tags that are not elegant within your HTML DOM.

I was inspired by the following article. With this module I aim to provide a solution for a very common template-struggle for many developers. Externalizing Backbone.js templates into separate files

Code examples

Example template.tpl.html file:

<div class="message-wrapper">
    <span><%= message %></span>
</div>

Example implementation in your Drupal module for a custom template.tpl.html file: (you can also use Drupals theme() layer, output should always be rendered HTML)

/**
 * @return array
 * @see hook_javascript_templates_add()
 */
function MY_MODULE_javascript_templates_add() {
  return array(
    "formSuccessMessage" => _MY_MODULE_form_success_message()
  );
}

/**
 * @return string
 */
function _MY_MODULE_form_success_message() {
  $templates_path = drupal_get_path("module", "MY_MODULE") . "/templates/";
  return file_get_contents($templates_path . "form-success-message.tpl.html");
}

Example for altering current available templates:

/**
 * @param $templates
 * @see hook_javascript_templates_alter()
 */
function MY_MODULE_javascript_templates_alter(&$templates) {
  unset($templates['test']);
}

Example implementation within Javascript underscore.js library:

function formSubmitSuccessHandler(response) {
  var messageTemplate = _.template(JavascriptTemplates.formSuccessMessage);
  $element.html(messageTemplate({message: response.message}));
}

Roadmap

• Add more use cases