Directives

Directives #

Directives are special attributes that instruct the compiler to do something with the output of an element. Commonly this is wrapping the markup with some Twig syntax, like an if conditional. Directives always start with an @ symbol.

@if #

Wraps an element in an if condition

<p @if="someCondition">
    I will only show up is someCondition is true
</p>

{% if someCondition %}
    <p>
        I will only show up is someCondition is true
    </p>
{% endif %}

@unless #

Wraps an element in an if condition, checking for a falsey value

<p @unless="someCondition">
    I will only show up is someCondition is false
</p>

{% if not someCondition %}
    <p>
        I will only show up is someCondition is true
    </p>
{% endif %}

@for #

Wraps an element in a for loop. You may also use @each, if you prefer.

<ul>
	<li @for="post in posts">{{ post.title }}</li>
</ul>

<ul>
    {% for post in posts %}
        <li>{{ post.title }}</li>
    {% endfor %}
</ul>

@checked #

Will add a checked attribute to a Checkbox input if the passed value is true.

<input
    type="checkbox"
    name="isComplete"
    @checked="task.isComplete"
/>

<input
    type="checkbox"
    name="isComplete"
    {{ task.isComplete ? 'checked' : '' }}
/>

@disabled #

Will add a disabled attribute to an element if the passed value is true.

<input
    type="checkbox"
    name="isComplete"
    @disabled="task.isComplete"
/>

<input
    type="checkbox"
    name="isComplete"
    {{ task.isComplete ? 'disabled' : '' }}
/>

@selected #

Will add a selected attribute to an element (usually an <option>) if the expression passed matches that of the value attribute, for example if user.country is "UK", the UK option will be selected.

<select name="country">
    <option value="UK" @selected="user.country">United Kingdom</option>
    <option value="US" @selected="user.country">United States</option>
</select>

<select name="country">
    <option value="UK" {{ user.county == "UK" ? 'selected' : '' }}>United Kingdom</option>
    <option value="US" {{ user.county == "US" ? 'selected' : '' }}>United States</option>
</select>

@text #

Inserts the content of a variable inside the element, with HTML escaped.

<span @text="post.author" />

<span>{{ post.author }}</span>

@html #

Inserts the content of a variable inside the element, with the raw filtered applied

<datetime @html="post.date()" />

<datetime>{{ post.date() | raw }}</datetime>

@attributes #

Adds a collection of attributes to the current element. Can be a simple string of attributes or an array with key, value pairs. You may omit a value for this directive, and it will assume the variable name is attributes

<div @attributes /> <!-- The same as @attributes="attributes" -->

On this page