{ Wings }

Wings is a logic-less templating library that works on the server and client. It is based on Mustache, but the syntax is less verbose and a few advanced features are sacrificed for small code size (0.75kb compressed!).

Usage

The module exposes a single function, wings.renderTemplate(template, data, links). When used with Ender, this function is aliased as $.render, which can also be called on selected elements. In the latter case, the function takes two arguments, and the contents of the element will be rendered as the template and returned.

Syntax

The syntax of Wings can be broken down into two broad categories: tags and sections.

Tags

Tags are how values are inserted into the template.

Basic Tags

A single value can be interpolated into the template by just surrounding it with curly braces:

The quick, brown {animal} jumped over the lazy dogs.

Here, the value of animal in the current context will inserted into the sentence where the tag {animal} appears.

Raw Tags

In the above example, HTML-unsafe characters will be escaped, to prevent this behavior, use a raw text tag:

<a href="{&url}">{text}</a>

The value of url will not be escaped.

Link Tags

To render a subtemplate passed in as a link, use a link tag:

<div>
    {@main}
</div>

Comment Tags

Comments can be inserted into the template using comment tags:

{# Basic Tag Example #}
The quick, brown {animal} jumped over the lazy dogs.

Sections

Sections are blocks of the template that are rendered together.

Basic Sections

A basic section is defined as follows:

{:foo}This is a section.{/foo}

The output of the section depends on the value of foo. If foo is a boolean, the section will either be included or omitted depending on foo's truthiness. If foo is an array, then the section will be rendered once for each element of foo, with the value of the element as the new context. So, for example, if foo was equal to the array [{name: 'John'}, {name: 'Jane'}], then

{:foo}
Hi, my name is {name}.
{/foo}

would be rendered as:

Hi, my name is John.
Hi, my name is Jane.

If the section is rendered with a object instead of an array, the section will be rendered once with that object serving as the context. Finally, if the section is a function, the function will be called with its first argument given as the raw text of the section, and the return value will replace the section.

Inverted Sections

Inverted sections are like normal sections, except that the section will only be rendered if the value is false or the given array is empty:

{!foo}
The foo value was false.
{/foo}

Acknowledgements

This module owes much of its design and inspiration to Mustache.