Template Syntax

Text

To render the component's variable in your template you can use this:

<div>$_component->message</div>

Or you can use the shorthand syntax:

<div>$message</div>

Also you can use the single mustache syntax, the result will be the same:

<div>{$message}</div>

Please note: all values are automatically encoded (rendered as plain text).

Please note: if you need to output $ or { without triggering interpolation you can escape these with backslash: \$ and \{

Raw HTML

To output raw HTML use a double mustache syntax, like this:

<div>{{$html}}</div>

Rendering HTML on your website can be very dangerous due to XSS vulnerabilities. Use it only on trusted content.

Expressions

You can render method's result or even a single line expression:

<div>{getFullName()}</div>

Please note: single line expression means no code blocks with ;, { ... } or variable assignments. You can use ternary expression if you need:

<div>{ $valid ? 'OK': 'Error' }</div>

Attributes

Rendering attribute values could not be easier,the syntax is all the same:

<a href="$href" class="red $myClass">My Link</a>
<a href="{getLatestUrl()}">Latest</a>

Nullable Attributes

Attribute will be rendered only if the value is not null:

<div id="$id">Content</div>

$id = null:
<div>Content</div>

$id = 'my-id':
<div id="my-id">Content</div>

Dynamic Attributes

Dynamic attributes ? here you go:

<div $attributeName="my-value">...

Boolean Attributes

If the HTML attribute is boolean you can bypass a condition into an attribute value, and it will render the attribute based on that condition. List of boolean attributes: async autofocus autoplay checked controls default defer disabled formnovalidate hidden ismap itemscope loop multiple muted nomodule novalidate open readonly required reversed selected

<button disabled="$isDisabled">Send</button>
$isDisabled = true: <button disabled="disabled">Send</button>
$isDisabled = false: <button>Send</button>

Conditional Attributes

Conditional attributes help you to simplify using the attributes based on conditions. For example, instead of using $condition ? 'one' : 'two' like here:

<div class="panel {$selected ? 'show' : ''}"></div>

you can use class.show="$selected" like here:

<div class="panel" class.show="$selected"></div>

You can have as many attributes as you want, all of them will be merged during the render.

Template Tag

template tag allows you to combine the content into one logical entity. It is a virtual tag and only its content will be rendered. It is useful for grouping and combinations with if or foreach

<template if="$user !== null">
    $user->Name
</template>

With user { $Name = 'Mike' } will result to:

Mike

Dynamic Tag

It happens that at some point you don't know what tag it will be during the application`s life. Therefore you are free to use a dynamic tag, like this:

<$tagName>Some content</$tagName>