Piecewise templates are appropriate in some situations. They generally involve splitting all components of every template across several files, and they have very limited logic. However, used correctly, they can be much simpler and cleaner than the equivalent in most other template languages.
Here’s an example. Consider this layout.pwp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ title }} – My Blog</title>
</head>
<body>
{{ body }}
</body>
</html>And this example.pwp:
<div id="articles">
{{ article < @articles }}
</div>This article.pwp:
<article class="blog-post">
<h2>{{ @title }}</h2>
<div class="body">
{{ @body | }}
</div>
<div class="comments">
{{ @comments.length }} comment{{ @comments.length | s }}
{{ comment < @comments }}
</div>
</article>This comment.pwp:
<article class="comment">
<h4>{{ @title }}</h4>
<div class="body">
{{ @body | }}
</div>
</article>You could put them together like this:
"use strict";
var piecewise = require("piecewise");
piecewise.filters.s = function(n) {
return n === 1 ? "" : "s";
};
var templates = new piecewise.DirectoryLoader(__dirname);
var example = templates.load("layout", {
title: "All Articles",
body: templates.read("example")
});
console.log(example.render({
articles: [
{
title: "Example post",
body: "<p>Hello, world!</p>",
comments: [
{
title: "Foo",
body: "bar"
},
{
title: "Baz",
body: "qux"
}
]
}
]
}));This renders… in a way that I hope you can infer from context.
Here are the {{/}}-delimited “expressions” available:
-
{{ @value.path | filter1 | filter2 | … }}– runsvalue.paththrough any number of filters. If no filters are provided, generic HTML-escaping is used; to disable this, add a trailing|, e.g.{{ @body | }}as seen above. -
{{ template }}– includes a template namedtemplate. -
{{ template @value.path }}– includes a template ifvalue.pathin the context is truthy according to JavaScript. The new template inherits the paren’t context. -
{{ template ! @value.path }}– the same as above, but negated. -
{{ template < @value.path }}– includestemplatefor each item in the array or array-like object atvalue.pathin the context. The context for each included template is the current item. -
{{ {{ }}– the literal text{{.
And here are the built-in filters, which can be removed, extended, or modified through the exported filters object:
-
html– the default filter when none are provided; escapes<,>,", and&. -
url– escapes using the JavaScript functionencodeURIComponent. -
text– escapes<,>, and&to HTML entities. -
attr– escapes"and&to HTML entities.
Please keep everything nice and functional and use double-quotes in your HTML, or things are liable to break in unexpected ways and behave differently across any versions.
You don’t have to put everything in a different file; consider writing a loader for XML, for example! It’s fun. Don’t be afraid to look at piecewise.js; it’s only about 300 lines.