wings

    0.5.9 • Public • Published

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

    Keywords

    none

    Install

    npm i wings

    DownloadsWeekly Downloads

    6

    Version

    0.5.9

    License

    none

    Last publish

    Collaborators

    • amccollum