Text node
Simple interpolation: {{greeting}}!
Attribute value

Colored text

Attribute name

Render attribute class

Anything anywhere

Ren{{text1}}er any{{text2}}ng an{{text3}}re

Interpolation with function
Interpolation with function: {{greet()}}!
Interpolation with function and parameters
Interpolation with function and params: {{greet('Hello', who)}}!
Access data with dot notation: {{path.greet}} {{path.name(path.who)}}!
Access array value: {{greet[0]}} {{greet[1]}}!
Repeater on array
[{{$index}}] {{greet}} {{item.name}}!
Repeater on object
[{{$key}}] {{greet}} {{item}}!
Multiple repeaters and parent scope

[{{$index}}] {{section.name}}

  • [{{../$index}}] [{{$index}}] {{item}} ({{../section.name}})
render html
Watch token
Watch my name: {{name}}
Watch element

Watch my name: {{name}}

Click event
Mouse event
Roll over me
Skip from an element
Show my name: {{name}}, but not my age: {{age}}
Image source
Hide token before rendering
.data-cloak {
	display: none;
This token is shown: {{name}}, but not this one: {{age}}
Show and hide element
Show and hide:
I was on screen!
And now it is me!
Data class switch

Attribute class switch

Checkbox checked
Disable element
Simple or multiple select box
Read only element