Handlebars template loader plugin for SystemJS
MIT License
Handlebars template loader plugin for SystemJS
jspm install hbs
You can now import your .hbs
files as such:
'use strict';
import $ from 'jquery';
import template from './template.hbs!';
import data from './data.json!';
const html = template(data);
$('#content').html(html);
'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!
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>
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.