diff --git a/README.md b/README.md index dcdab8a71..3a1f21dbb 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ raptor-templates - [Template Directives Overview](#template-directives-overview) - [Text Replacement](#text-replacement) - [Expressions](#expressions) + - [Includes](#includes) - [Variables](#variables) - [Conditionals](#conditionals) - [if...else-if...else](#ifelse-ifelse) @@ -28,6 +29,9 @@ raptor-templates - [Shorthand conditionals](#shorthand-conditionals) - [Looping](#looping) - [for](#for) + - [Loop Status Variable](#loop-status-variable) + - [Loop Separator](#loop-separator) + - [Property Looping](#property-looping) - [Macros](#macros) - [def](#def) - [invoke](#invoke) @@ -36,9 +40,11 @@ raptor-templates - [content](#content) - [replace](#replace) - [strip](#strip) + - [Comments](#comments) - [Helpers](#helpers) - [Custom Tags and Attributes](#custom-tags-and-attributes) -- [Taglibs](#taglibs) + - [Layouts Taglib](#layouts-taglib) +- [Custom Taglibs](#custom-taglibs) - [Tag Renderer](#tag-renderer) - [raptor-taglib.json](#raptor-taglibjson) - [Sample Taglib](#sample-taglib) @@ -337,9 +343,18 @@ By default, all special HTML characters will be escaped in dynamic text to preve Hello $!{data.name}! ``` +If necessary, you can escape `$` using a forward slash to have it be treated as text instead of a placeholder token: + +```html +Test: \${hello} + +``` + ## Expressions -Wherever expressions are allowed, they are treated as JavaScript expressions copied out to the compiled template verbatim. However, you can choose to use alternate versions of the following JavaScript operators: +Wherever expressions are allowed, they are treated as JavaScript expressions and copied out to the compiled template verbatim. However, you can choose to use alternate versions of the following JavaScript operators: JavaScript Operator | Raptor Equivalent ------------------- | ----------------- @@ -352,6 +367,14 @@ JavaScript Operator | Raptor Equivalent `<=` | `le` `>=` | `ge` +## Includes + +Other Raptor Template files can be included using the `` tag and a relative path. For example: + +```html + +``` + ## Variables Input data passed to a template is made available using a special `data` variable. It's possible to declare your own variables as shown in the following sample code: @@ -528,9 +551,44 @@ The output would be the following: ``` +#### Loop Status Variable + +The `c:for` directive also supports a loop status variable in case you need to know the current loop index. For example: + +```html + +``` + +#### Loop Separator + +```html +$color + +
+ $color +
+``` + +#### Property Looping + +```html + +``` + ## Macros -Macros allow for reusable fragments within an HTML template. Macros can also be parameterized. A macro can be defined using the `` directive and a macro when defining a macro. +Parameterized macros allow for reusable fragments within an HTML template. A macro can be defined using the `` directive. ### def @@ -668,6 +726,17 @@ _Output:_ ``` +## Comments + +Standard HTML comments can be used to add comments to your template. The HTML comments will not show up in the rendered HTML. + +Example comments: + +```html + +

Hello

+``` + ## Helpers Since Raptor Template files compile into CommonJS modules, any Node.js module can be "imported" into a template for use as a helper module. For example, given the following helper module: @@ -718,9 +787,47 @@ The output of the above template might be the following: ``` -For information on how to use and create taglibs, please see the [Taglibs](#taglibs) section below. +For information on how to use and create taglibs, please see the [Custom Taglibs](#custom-taglibs) section below. -# Taglibs +## Layouts Taglib + +Raptor Templates provides a `layout` taglib to support separating out layout from content. The usage of of the `layout` taglib is shown in the sample code below: + +_default-layout.rhtml:_ + +```html + + + + + <layout:placeholder name="title"/> + + +

+ +

+

+ +

+
+ + Default Footer + +
+ + +``` + +_Usage of `default-layout.rhtml`:_ + +```html + + My Page + BODY CONTENT + +``` + +# Custom Taglibs ## Tag Renderer