A fast, easy to use, general purpose template view engine for nodejs.
npm install magnum
Magnum is a general purpose logic driven templating engine for nodejs developers. Magnum templates allow developers to easily script complex view logic with a javascript like syntax. Magnum focuses on being general purpose to enable developers can leverage it for code generation, html templates, xml or other niche template scenarios.
Inspired by Microsoft Razor
## exampleThe following is a quick example demonstrating rendering a template.
<html>
<head>
@section header
</head>
<body>
@section body
</body>
</html>
@import 'layout.html'
@section header {
<title>@(context.title)</html>
}
@section body {
<h1>Welcome</h1>
}
var magnum = require('magnum')
var context = { title: 'my page'}
var html = magnum.render('./view.html', context)
console.log(html)
<html>
<head>
<title>my page</html>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
The following outlines magnums methods.
### compileThe compile() method compiles the template file and returns a template object.
var magnum = require('magnum')
var template = magnum.compile('./view.html') // store for later
//...later
var context = {title: 'my page'}
var html = template.render(context) // render
console.log(html)
To quickly compile and render a view, call the magnum.render() method.
var magnum = require('magnum')
var output = magnum.render('./view.html')
When calling render() on a template (or via magnum itself), you can optionally pass a data context object to be rendered. Magnum encapulates all data passed on the "context" object which is passed to magnum template on the render() method. Consider the following..
<p>Hi @(context.name)</p>
<ul>
@for(var i = 0; i < context.fruits.length; i++) {
<li>@(context.fruits[i])</li>
}
</ul>
var magnum = require('magnum')
var context = {name : 'dave',
fruits : ['apples',
'oranges',
'kiwifruit',
'mangos',
'grapes' ]}
var html = magnum.render('./template.html', context)
the context can be accessed in the following way...
## syntaxThe following syntax is available inside magnum templates.
### expressionsThe expression syntax allows a user to emit the value within. The following are examples.
@* strings *@
@('hello world')
@* numbers *@
@(123)
@* conditions: displays false) *@
@(10 > 20)
@* ternary: displays 'cat' *@
@(true ? 'cat' : 'dog')
@* variables *@
@(myvariable)
@* functions: displays 'hello world' *@
@{ var message = function() { return 'hello world' } }
@(message())
if statments are supported.
@if(expression) {
some content
}
@if(a > 10) {
some content
}
@(user.loggedin) {
<span>welcome</span>
}
the following for loops are supported.
@for(var i = i; i < 100; i++) {
@(i)
}
@for(var n in list) {
@(list[n])
}
code blocks can be useful for adding template side rendering logic.
@{
var message = 'hello'
}
@(message)
Mangum supports layouts and sections. This section describes how to use them.
Use the import statement to have one template inheriate from another. This will allow the child template to (optionally) override the sections of the parent.
layout.html will be the parent template, here we define three sections.. header, body and footer.
<html>
<head>
@section header
</head>
<body>
@section body
@section footer {
<span>copyright 2013</span>
}
</body>
</html>
Inside view.html, we inheriate from layout.html with the import keyword. Inside view.html, we define sections for header and body. Note that the default content for the footer not overridden. If the child template does not override a parents section, the parents section will be used instead.
@import 'layout.html'
@section header {
<title>@(context.title)</html>
}
@section body {
<h1>Welcome</h1>
}
Magnum templates allow the user to render snippets of content in place. The following renders a template named navigation.html in place.
<ul>
<li><a href='#'>home</a></li>
<li><a href='#'>about</a></li>
<li><a href='#'>contact</a></li>
</ul>
<html>
<head>
</head>
<body>
@render 'navigation.html'
@section content
</body>
</html>
var express = require('express')
var magnum = require('magnum')
//----------------------------------------------
// setup: create and apply render method
//----------------------------------------------
var app = express()
app.use(function (req, res, next) {
res.render = function (path, context) {
var output = magnum.render(path, context)
res.setHeader('Content-Type', 'text/html')
res.setHeader('Content-Length', Buffer.byteLength(output))
res.send(output)
}
next()
})
//----------------------------------------------
// render the template...
//----------------------------------------------
app.get('/', function(req, res) {
res.render('./index.html')
})