handlebars-template-loader-fixer
v0.5.4
Published
A Handlebars template loader for Webpack
Downloads
4
Maintainers
Readme
handlebars-template-loader
A Handlebars template loader for Webpack
module: {
loaders: [
{ test: /\.hbs/, loader: "handlebars-template-loader" }
]
},
node: {
fs: "empty" // avoids error messages
}
};
<br>
####Loading templates
<br>
```html
<!-- File: hello.hbs -->
<p>Hello {{name}}</p>
// 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(items[i]) + ""; }
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: []
}
}
]
}
};
module: {
loaders: [
{
test: /\.hbs$/,
loader: "handlebars-template-loader",
query: {
attributes: ['img:src', 'x-img:src']
}
}
]
}
};
<br>
###Macros
<br>
Macros allow additional features like including templates or inserting custom text in a compiled templates.
<br>
####The *require* macro
<br>
The `require` macro expects a path to a handlebars template. The macro is then translated to a webpack require expression that evaluates the template using the same arguments.
<br>
```html
<h4>Profile</h4>
Name: <strong>{{name}}</strong>
<br>
Surname: <strong>{{surname}}</strong>
<div class="profile-details">
@require('profile-details.hbs')
</div>
<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: /\.hbs/,
loader: "handlebars-template-loader",
query: {
parseMacros: false
}
},
}
}
}
<br>
####Arguments
<br>
Macros can accept an arbitrary number of arguments. Only boolean, strings and numeric types are supported.
<br>
```javascript
// File: webpack.config.js
module.exports = {
// ...
module: {
loaders: {
// ...
{ test: /\.html$/, loader: "underscore-template-loader" },
}
},
macros: {
header: function (size, content) {
return "'<h" + size + ">" + content + "</h" + size + ">'";
}
}
}
Released under the MIT license.