RequireJS Template Plugins

Small set of plugins for RequireJS that deal with templating engines such as Handlebars or Mustache.

For more plugins please check the RequireJS wiki.

Installing

You can use bower to install this set of plugins:

$ bower install --save requirejs-template-plugins

Using Underscore Templates

To use Underscore templates in your app, your configuration should look like this:

require.config({
  paths: {
    underscore: 'bower_components/requirejs-template-plugins/lib/underscore',
  },

  map: {
    '*': {
      jst:  'bower_components/requirejs-template-plugins/jst'
    }
  }
});

Then you would load the template in your view like this:

define(function (require) {
  var Backbone = require('backbone');
  var template = require('jst!views/button');

  return Backbone.View.extend({
    template: template,

    render: function () {
      this.$el.html(template({name: 'Daniel'}));
      return this;
    }
  });
});

Which would try to load views/button.jst:

Hi <%=name%>!

Using Handlebars Templates

To use Handlebars templates, your configuration should look like this:

require.config({
  paths: {
    handlebars: 'bower_components/requirejs-template-plugins/lib/handlebars',
  },

  map: {
    '*': {
      hbs: 'bower_components/requirejs-template-plugins/hbs'
    }
  }
});

Then you would load the template in your view like this:

define(function (require) {
  var Backbone = require('backbone');
  var template = require('hbs!views/button');

  return Backbone.View.extend({
    template: template,

    render: function () {
      this.$el.html(template({name: 'Daniel'}));
      return this;
    }
  });
});

Which would try to load views/button.hbs:

Hi {{name}}!

Using Mustache Templates

To use Mustache templates, your configuration should look like this:

require.config({
  paths: {
    hogan: 'bower_components/requirejs-template-plugins/lib/hogan',
  },

  map: {
    '*': {
      hgn: 'bower_components/requirejs-template-plugins/hgn'
    }
  }
});

Then you would load the template in your view like this:

define(function (require) {
  var Backbone = require('backbone');
  var template = require('hgn!views/button');

  return Backbone.View.extend({
    template: template,

    render: function () {
      this.$el.html(template({name: 'Daniel'}));
      return this;
    }
  });
});

Which would try to load views/button.mustache:

Hi {{name}}!

Testing

Browser

Run the following:

$ grunt test:browser

And open http://localhost:8000/ in your browser.

If you want to rerun tests on file changes, run the following instead:

$ grunt follow:browser

PhantomJS

Run the following:

$ grunt test:phantom

If you want to rerun tests on file changes, run the following instead:

$ grunt follow:phantom

Meta

• Code: git clone git://github.com/unindented/requirejs-template-plugins.git
• Home: http://github.com/unindented/requirejs-template-plugins/

Contributors

Daniel Perez Alvarez ([email protected])

License

Copyright (c) 2014 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.