<% extends 'skins/base.html' %>

<% subskin 'content' | markdown %>

The `ringo/skin` module provides web application developers with a flexible templating framework.
At its simplest, creating and rendering a skin looks like this:

    >> include('ringo/skin');
    >> var skin = createSkin('Hello \<% name %>!');
    >> skin.render({ name: 'World' });
    Hello World!

The part wrapped in `\<% %>` is called macro tag in RingoJS. Macros are replaced at render time
by looking for corresponding properties or functions in the context argument passed to `Skin.render()`.
RingoJS also provides a number of built-in macros which are described below.

### Subskins

A very important feature are subskins, which are named skin fragments that work pretty much like functions work in
JavaScript. A subskin is created using the built-in `\<% subskin %>` tag and ends with the begin of the
next subskin or the skin end.

    \<% subskin hello %>
    Hello \<% name %>!</pre>

Use the built-in `\<% render %>` macro to render a subskin with the current context:

    \<% render hello %>

Provided the `skin.render()` method is called with context argument
`{name: 'Luisa'}` the output will be:

<p style="background-color: pink;"><% render hello %></p>

You can also bind values to the macro context in the tag:

    \<% set {name: Julia} render hello %>

<p style="background-color: pink;">
<% set {name: Julia } render hello %>
</p>

### Loops

The for..in macro gives you an easy way to loop through arrays and other objects that support
for-in loops in JavaScript.

    \<% for name in \<% names %> render hello %>

<p style="background-color: pink;">
<% for name in <% names %> render hello %>
</p>

Or you can define the objects to loop through using object and array literals in the macro tag:

    \<% for name in [Gerlinde, Ralph, Thomas] render hello %>

<p style="background-color: pink;">
<% for name in [Gerlinde, Ralph, Thomas] render hello %>
</p>

### Filters

Finally, filters let you do all kinds of post-processing
on the output of a macro.

    \<% render hello | uppercase %>

<p style="background-color: pink;">
    <% render 'hello' | uppercase %>
</p>

[Visit the RingoJS site](http://ringojs.org/wiki/Skins) to learn more about skin rendering.

<% subskin 'hello' %>Hello <% name %>!