❤
npm
Sign UpSign In

magnum

0.1.8 • Public • Published

A fast, easy to use, general purpose template view engine for nodejs.

install

npm install magnum

contents

## overview

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

 ## example

The following is a quick example demonstrating rendering a template.

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>
## api

The following outlines magnums methods.

 ### compile

The 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)
 ### render

To quickly compile and render a view, call the magnum.render() method.

var magnum = require('magnum')
 
var output = magnum.render('./view.html')
 

context

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..

template.html

 
<p>Hi @(context.name)</p>
 
<ul>
 
    @for(var i = 0; i < context.fruits.length; i++) {
 
        <li>@(context.fruits[i])</li>
    }
 
</ul>

app.js

 
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...

## syntax

The following syntax is available inside magnum templates.

 ### expressions

The 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 statement

if statments are supported.

@if(expression) {
    some content
}

@if(a > 10) {
    some content
}

@(user.loggedin) {
    <span>welcome</span>
}
### for statement

the following for loops are supported.

@for(var i = i; i < 100; i++) {
    @(i)
}

@for(var n in list) {
    @(list[n])
}
### code

code blocks can be useful for adding template side rendering logic.

@{
    var message = 'hello'
}

@(message)
### comments ``` @* this comment will not be rendered! *@ ``` ### layouts and sections

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.

navigation.html

 
    <ul>
 
        <li><a href='#'>home</a></li>
 
        <li><a href='#'>about</a></li>
 
        <li><a href='#'>contact</a></li>
 
    </ul>

layout.html

<html>
 
    <head>
 
    </head>
 
    <body>
 
        @render 'navigation.html'
 
        @section content
 
    </body>
 
</html>
##express Magnum does not provide any built in middleware for specifically for express, however it is trivial for developers to 'snap in' utility methods on the express response to acheive desireable results. consider the following... 
 
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') 
})

Readme

Keywords

none

Package Sidebar

Install

npm i magnum

Repository

github.com/sinclairzx81/magnum

Homepage

github.com/sinclairzx81/magnum#readme

Weekly Downloads

13

Version

0.1.8

License

none

Last publish

Collaborators

  • sinclair
Try on RunKit
Report malware