<% 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 %>!
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:
<% render hello %>
You can also bind values to the macro context in the tag:
\<% set {name: Julia} render hello %>
<% set {name: Julia } render hello %>
### 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 %>
<% for name in <% names %> render hello %>
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 %>
<% for name in [Gerlinde, Ralph, Thomas] render hello %>
### Filters
Finally, filters let you do all kinds of post-processing
on the output of a macro.
\<% render hello | uppercase %>
<% render 'hello' | uppercase %>
[Visit the RingoJS site](http://ringojs.org/wiki/Skins) to learn more about skin rendering.
<% subskin 'hello' %>Hello <% name %>!