Maelstrom

What Maelstrom can do

Render static templates incredibly fast:

div#exampleid
    p This is a static template
    span{color="green"} with different elements
            

var tmpl = Maelstrom.compile(templateString);
tmp.append(outputElement);
            

Render >>

Render templates with variables:

h1 [[$title]]
h3 [[$subtitle]]
p content with variables: [[$content.val]]
    input(value="[[$content.input]]")
    | and even
    span{color="[[$content.color]]"}  variables in styles
            

var obj = {
    "title": "My Awesome Template",
    "subtitle": "Rendered with Maelstrom",
    "content": {
        "val": "and variables of nested objects",
        "input": "and variables in element attributes",
        "color": "blue"
    }
};
var tmpl = Maelstrom.compile(templateString);
tmpl.render(obj);
tmpl.append(outputElement);
            

Render >>

Render templates with live update subscribtion:

div{background="blue"}
    div{width="[[$animated]]", height="20px", background-color="red"}
p state: [[$animated]]
            

var obj = {
    "animated": "1%"
};
var tmpl = Maelstrom.compile(templateString);
tmpl.append(outputElement);
//subscribe to the object
tmpl.subscribe(obj);

//updating object
setInterval(function() {
    obj.animated = ((parseInt(obj.animated,10)+1)%101)+"%";
},100);
            

Render >>

API Documentation

Maelstrom.compile(templateString[, subscribtionObject]) Parameters:

• templateString - template string, see Template Documentation
• subscribtionObject - optional - object to subscribe to, equal to:
  template.subscribe(subscribtionObject);

Returns: compiled template object


template.render(object) Parameters:

• object - applies this object to the template

Returns: this


template.subscribe(object) Parameters:

• object - object to subscribe to (updates the template, when the object changes)

Returns: this


template.unsubscribe() Function to unsubscribe the current subscribtion object, stops live updating.
Parameters: none
Returns: this


template.append(element) Parameters:

• element - element to append the template to

Returns: this


template.remove(element) Parameters:

• element - element to remove the template from

Returns: this

Template Documentation

The template syntax is inspired by Jade. Currently it does not support any logical operations.
Variables can be included with [[$variableName]]. Aditionally to the Jade-features you can add style attributes in {...}-Brackets after an element declaration.

More information about templates is coming soon.