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)}}!






	
Path

	

	

	

	
Access data with dot notation: {{path.greet}} {{path.name(path.who)}}!






	
Array

	

	

	

	
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

	

	

	

	
	

		
{{firstLine}}{{secondLine}}








	
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

	

	

	

	






	
Link

	

	

	

	
{{link}}






	
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