magnum
v0.1.8
Published
General purpose javascript template engine inspired by Microsoft Razor templates.
Downloads
141
Readme
A easy to use, general purpose template engine for nodejs.
install
npm install magnumcontents
The following outlines a layout, view and code required to render the output.
layout.html
<html>
<head>
@section header
</head>
<body>
@section body
</body>
</html>view.html
@import 'layout.html'
@section header {
<title>@(context.title)</html>
}
@section body {
<h1>Welcome</h1>
}app.js
var magnum = require('magnum')
var context = { title: 'my page'}
var html = magnum.render('./view.html', context)
console.log(html)outputs:
<html>
<head>
<title>my page</html>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>The following are the methods exposed by the magnum api.
compiles and renders the output.
var magnum = require('magnum')
var output = magnum.render('./view.html')
compiles the template and returns a template object. users can use this compile once, and prevent extra reads to disk.
var magnum = require('magnum')
var template = magnum.compile('./view.html') // save compiled template for later.
var html = template.render({title: 'my page'})
console.log(html)context
When calling render() on a template, you can optionally pass a data context (an 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..
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...
template.html
<p>Hi @(context.name)</p>
<ul>
@for(var i = 0; i < context.fruits.length; i++) {
<li>@(context.fruits[i])</li>
}
</ul>contexts are optional.
The following syntax is available inside magnum templates.
will emit the value contained.
@('hello world')
@(123)
@(some_variable)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.
import
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
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>view.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>
}render
Magnum templates allow the user to render snippets of content in place. The following renders a template named navigation.html in place.
<html>
<head>
</head>
<body>
@render 'navigation.html'
@section content
</body>
</html>