requirejs-template-plugins

    0.0.2 • Public • Published

    RequireJS Template Plugins Build Status Dependency Status

    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

    Contributors

    Daniel Perez Alvarez (unindented@gmail.com)

    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.

    Keywords

    none

    Install

    npm i requirejs-template-plugins

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    none

    Last publish

    Collaborators

    • unindented