0.5.4 • Published 8 years ago
handlebars-template-loader-fixer v0.5.4
handlebars-template-loader
A Handlebars template loader for Webpack
// Get Handlebars instance var Handlebars = require('handlebars-template-loader').Handlebars;
Handlebars.registerHelper('list', function(items, options) { var out = "";
for(var i=0, l=items.length; i<l; i++) { out = out + "" + options.fn(itemsi) + ""; }
return out + ""; });
Handlebars.registerHelper('link', function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url);
var result = '' + text + '';
return new Handlebars.SafeString(result); });
<br>
```javascript
// File: main.js
// Include template helpers
require("./helpers.js");
module.exports = {
//...
module: {
loaders: [
{
test: /\.hbs$/,
loader: "handlebars-template-loader",
query: {
prependFilenameComment: __dirname,
}
}
]
}
};
module.exports = {
//...
module: {
loaders: [
//...
{ test: /\.hbs/, loader: "handlebars-template-loader" },
{ test: /\.jpg/, loader: "file-loader" },
{ test: /\.png/, loader: "url-loader?mimetype=image/png" },
]
}
};
<!-- Using root = undefined => no translation -->
<img src="/not_translated.jpg">
<!-- Using root = 'images' => require('images/image.jpg') -->
<img src="/image.jpg">
module.exports = {
//...
module: {
loaders: [
{
test: /\.hbs$/,
loader: "handlebars-template-loader",
query: {
attributes: []
}
}
]
}
};
Name: {{name}} Surname: {{surname}}
<div class="wiki">
<h3>Introduction</h3>
@include('intro.htm')
<h3>Authors</h3>
@include('authors.htm')
</div>
<p>Lorem ipsum</p>
@br(3)
<p>Sit amet</p>
@nl()
module: {
loaders: {
// ...
{ test: /\.hbs/, loader: "handlebars-template-loader" },
}
},
macros: {
copyright: function () {
return "'<p>Copyright FakeCorp 2014 - 2015</p>'";
}
}
}
<br>
We then invoke our macro from within the template as usual.
<br>
```html
<footer>
@copyright()
</footer>
module: {
loaders: {
// ...
{ test: /\.html$/, loader: "underscore-template-loader" },
}
},
macros: {
header: function (size, content) {
return "'<h" + size + ">" + content + "</h" + size + ">'";
}
}
}
<br>
```html
@header(1, 'Welcome')
<p>Lorem ipsum</p>
@header(3, 'Contents')
<p>Sit amet</p>
Released under the MIT license.
0.5.4
8 years ago