Template Syntax

Template Syntax

Because trebor work with html code, it template syntax is based on some special attribute declaration and some expressions surrounded with braces. Every element attribute starting with some of this charaters [$, :, @, #] are parsed and evaluated by the instance where it is declared. See how work each one:

Interpolation

The interpolation text is as simple as type some javascript expression inside braces (single curly braces):

<h1>Some interpolated {'text'}</h1>

or using a variable declared in the component instance like this

<h1>Some interpolated {text}</h1>

Everything inside {...} will be treated as javascript code in the instance scope and will be replaced by its value in the text.

Insert HTML

If you want insert a piece of html code you must use the $html special attribute (directive):

<div $html="<p>Some text inserted from component instace</p>"></div>
<!-- this will be rendered in  -->
<div>
  <p>Some text inserted from component instace</p>
</div>

or if you want to escape some special attribute or evaluation from compilation just leave the directive empty:

<div $html>
  <p>Some text escaped of {{ compilation }}</p>
</div>
<!-- this will be rendered in  -->
<div>
  <p>Some text escaped of { compilation }</p>
</div>

See how the braces syntax was not touched and rendered as is.

The value of the $html directive can be a javascript expression that return a string with the html to be inserted or none if you want escape expressions.

Conditionals

For control what is show in some cases the if else statement is very powerfull, for that cases trebor has some directive.

The $if directive work like an if, it's take an expression that evaluate to true or false and, in case of the value be truth, show the element:

<h1 $if="thruty">This is shown</h1>
<h1 $else>This other is shown</h1>

In this case, the $if directive is used alongside of an $else to simulate a conditional, but in some cases it can be used alone, to show or not an element:

<h1 $if="thruty">This is shown only if evaluate to true</h1>

Other usefull directive is $else-if that work as an else if condition:

<h1 $if="thruty === 'true'">This is shown</h1>
<h1 $else-if="thruty === 'false'">This other is shown</h1>
<h1 $else>Then this is shown</h1>

If you want to show a serie of elements, use a <template> element with this directives:

<template $if="thruty === 'true'">
  <p>This is shown</p>
  <span>and this too</span>
</template>

<template $else-if="thruty === 'false'">
  <p>This other is shown</p>
  <span>and this other too</span>
</template>

<template $else>
  <p>Then this is shown</p>
  <span>and this too</span>
</template>

Note: $else-if and $else are invalid if they are not preceded with an $if. This type of mistake provocate an error in compilation time.

Loops

Make a loop with trebor is very simple and intuitive. With the $for directive you can iterate over arrays or over objects and have control of the values.

<ul>
  <li $for="item in items">
    {{ item }}
  </li>
</ul>

In some cases is necessary have access to the loop index. To do that you have to provide an argument next to the iterable variable like this:

<ul>
  <li $for="(item, i) in items">
    {{ i + 1 }}. {{ item }}
  </li>
</ul>

When you iterate over an object, this second argument becomes the key of the property analized:

<ul>
  <li $for="(value, key) in obj">
    {{ key }}: {{ value }}
  </li>
</ul>

You can iterate over a number, range, array or object expressions too if you want a faster loop:

<!-- over an array expression -->
<ul>
  <li $for="value in [1, 2, 3, 4, 5]">
    {{ value }}
  </li>
</ul>
<!-- over a object expression -->
<ul>
  <li $for="(value, key) in { a: 'a', b: 'b' }">
    {{ key }}: {{ value }}
  </li>
</ul>
<!-- over a number -->
<ul>
  <li $for="value in 5">
    {{ value }}
  </li>
</ul>
<!-- over a range -->
<ul>
  <li $for="value in 1..5">
    {{ value }}
  </li>
</ul>

Like $if directive, with the $for attribute you can show multiple elements each time it iterate using a <template> element:

<template $for="(value, key) in obj">
  <h1>{{ key }}</h1>
  <span>{{ value }}</span>
</template>

The code above show an <h1> and a <span> each time, without a wrapper element.

Input values

To work easily with <input>, <textarea> and <select> elements trebor has the $value directive. This directive are used to do two way data binding in mentioned elements, updating the value of the element acording to the value it acept:

<!-- Text binding -->
<input type="text" $value="someTextVariable">
<span>{{ typeof someTextVariable }} value: {{ someTextVariable }}</span>

<!-- Boolean binding -->
<input type="checkbox" $value="someBooleanVariable">
<span>{{ typeof someBooleanVariable }} value: {{ someBooleanVariable }}</span>

<!-- Number binding -->
<input type="number" $value="someNumberVariable">
<span>{{ typeof someNumberVariable }} value: {{ someNumberVariable }}</span>

<!-- Select binding -->
<span>Selected value: {{ someVariable }}</span>
<select $value="someVariable">
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

Other directive that work similar to $value is $name. This directive is used when you have a group of checkboxes or radio buttons. It bind the value of each <input> element to a variable on the component and update this value whenever it change:

<!-- Checkbox group -->
<label>Colors selected: [{{ colors.join(', ') }}]</label><br>
<input type="checkbox" $name="colors" value="Red">Red<br>
<input type="checkbox" $name="colors" value="Green">Green<br>
<input type="checkbox" $name="colors" value="Blue">Blue

<!-- Radio group -->
<label>Favorite fruit: {{ fruit }}</label><br>
<input type="radio" $name="fruit" value="Apple">Apple<br>
<input type="radio" $name="fruit" value="Orange">Orange<br>
<input type="radio" $name="fruit" value="Strawberry">Strawberry

Note: Only one of the above directive can be used at same time. If both are used $value directive has precedence.

Bind attributes

To assign a value to an attribute trebor use the special syntax character : prefixing the attribute name:

<input type="text" :value="someVariable"/>
<!-- or -->
<img :alt="`Some text expression ${someValue}`" src="image.png"/>

Bound attributes can receive any javascript expression that return a value, always in the component instance scope.

Events

Working with events in the template is quite easy, all you need to do is put an @ as prefix of any event name:

<input type="text" @input="someFuncEvent()"/>
<!-- or -->
<button @click="someOtherEvent()">Click me!</button>

In the event scope there are two parameters that can be used, $event that is the HTML event fired and $el that is the element who fire the event

<input type="text" @input="someFuncEvent($event)"/>
<!-- or -->
<button @click="someOtherEvent($event, $el, someThingElse)">Click me!</button>

Element References

Referencing an element give you a full control over what to do with an HTML element. Reference can be declared prefixing with a # follow with the name of the reference that it will have in the component instance:

<input type="text" #MyInputName/>

and in the javascript

// app.js

app.$refs.MyInputName;
// -> HTMLInputElement