Description
This JavaScript template engine is designed to provide a fluid yet powerful syntax.
Features
- Light and expressive syntax
- Autoescaping (may be disabled locally with the
raw()
function) - Handles arrays
- Template composition
- Syntax and runtime error reporting
How to use it
Example:
<script type="text/html" id="band">
<li>
<dl>
<dt>$(_.name)</dt>
<dd>$(_.genre)</dd>
</dl>
</li>
</script>
<script type="text/html" id="myTemplate">
<li>
Favorite bands of $(_.sex === "M" ? "Mr." : "Mrs.") $(_.name) : $if(_.bands) { ($(_.bands.length)) }
$if(_.bands) {
<ul>
$(run("band", _.bands))
</ul>
} else {
(Unknown)
}
</li>
</script>
<script type="text/javascript">
// compile 'band' template to make it available in myTemplate
FluidTmpl.compile("band")
var template = FluidTmpl.compile("myTemplate")
document.getElementById("destination").innerHTML = template([
{
name: "Joe",
sex: "M",
bands: [
{
name: "Gojira",
genre: "Death Metal"
},
{
name: "Metallica",
genre: "Thrash Metal"
}
]
},
{
name: "Alice",
sex: "F",
bands: [
{
name: "The Dandy Warhols",
genre: "Rock"
},
{
name: "Rodrigo & Gabriela",
genre: "Folk"
}
]
},
{
name: "Vince",
sex: "M"
}
]);
// Then you can reuse it with:
// FluidTmpl.run("myTemplate", myData)
</script>