Variables
Variable tag is one of the ways to create local context data.
When it comes to templating, variables help with reusing logic and piece of data to clean things a little and make templates easier to understand.
Instead of this:
<ul>
<li #repeat="$data.list.filter(n => n.price > 0)">{$item.name}</li>
</ul>
<p>
Total price: {
$data.list
.filter(n => n.size > 10).reduce((acc, n) => n.price), 0)
}
</p>Do this:
<variable name="pricedList" value="$data.list.filter(n => n.price > 0)"></variable>
<ul>
<li #repeat="pricedList">{$item.name}</li>
</ul>
<variable name="total" value="pricedList.reduce((acc, n) => n.price), 0)"></variable>
<p>Total price: {total}</p>The value attribute
You can specify any value for your variable and you dont need curly braces.
Inner content
Anything you put inside the variable tag body will be treated as string. It cannot be HTML but templating binding can work.
<variable name="title">My string title</variable>
<!-- Same as above -->
<variable name="title" value="'My string title'"></variable>