plugin-hbs

Handlebars template loader plugin for SystemJS

Installation

jspm install hbs

Usage

You can now import your .hbs files as such:

jQuery

'use strict';
import $ from 'jquery';

import template from './template.hbs!';
import data from './data.json!';

const html = template(data);

$('#content').html(html);

Marionette

'use strict';

import {ItemView} from 'marionette';
import template from './myTemplate.hbs!';

export default ItemView.extend({
  template,
  initialize() {}
});

Note: you should keep your template filenames unique so that you can use Rollup during static builds!

How to use helpers

To use helpers, be sure to use the Handlebars runtime. You'll need to have Handlebars installed in your project.

JavaScript

'use strict';

import Handlebars from 'handlebars/handlebars.runtime';

Handlebars.registerHelper('wrapWithMoo', (options) => {
  return new Handlebars.SafeString(`moo! ${options.fn(this)} moo!`);
});

Handlebars

<p>{{#wrapWithMoo}}(this should be surrounded by the sound a cow makes){{/wrapWithMoo}}</p>

How to use partials

The use of partials is quite similar to helpers. Just be sure to use the Handlebars runtime.

JavaScript

'use strict';

import Handlebars from 'handlebars/handlebars.runtime';
import myPartial from './myPartial.hbs!';

Handlebars.registerPartial('myPartial', myPartial);

Handlebars

{{> myPartial }}

Head over to https://github.com/davis/jspm-marionette to see a working example that uses this plugin.