3 Statements

☰

• 1 if
• 2 for..in
• 3 for..of
• 4 each
• 5 switch
• 6 repeat
• 7 visible
• 8 Extensibility
• 9 Binded statements

1 if

Controls render flow. If the condition is true all subnodes are rendered, otherwise goes to next else.

if (CONDITION) {
	/*nodes*/
}
else if (CONDITION) {

}
else {

}

2 for..in

Loops over the objects keys and values; renders on every iteration subnodes with current key, value.

❗ Statment uses controllers scope to store references to current key or value variables. That means, that the current Model is also passed to subnodes

for (KEY_NAME in OBJECT) {
	/*nodes*/
}
for ((KEY_NAME, VALUE_NAME) in OBJECT) {
	/*nodes*/
}

for (keyProp in user) { div > 'Property of the user: ~[keyProp]' } for ((name, value) in user) { if (value != null) { 'Prop: ~[name]; Stringified value: ~[: value.toString()]' } }

## `3` `for..of`

Loops over the array values. _Similar to `for..in`_

> :exclamation: Statment stores variables in the `controllers` scope. So parents model is accessible.

```mask
for (ITEM_NAME of ARRAY) {
	/*nodes*/
}
for ((ITEM_NAME, INDEX_NAME) of ARRAY) {
	/*nodes*/
}

4 each

Loops over the array

❗ On each iteration new models scope is created for the array

Though parents scope is not accessible, but this approach is good for incapsulation. We suggest to use this statement over for..of, unless you really need the access to the parents Model

each (ARRAY) {
	/*nodes*/
}

each (users) { 'Username: ~[name]' }

## `5` `switch`

Controls render flow

```mask
switch (EXPRESSION) {
	case (expression1) {
		/*nodes*/
	}
	case (expression2) {
		/*nodes*/	
	}
	case (expressionN) {
		/*nodes*/	
	}
	default {
		/*nodes*/
	}
}

6 repeat

Render nodes N times. For each iteration there is a current index in controllers scope.

repeat (START_INDEX..END_INDEX) {
	/*nodes*/
}

repeat (3..5) > log(index); // In console: // 3 // 4 // 5

## `7` `visible`

Controlls visibility state of the subnodes. If condition is `false` the statement still renders all the subnodes, but applies `display:none` to the elements.
```mask
visible (CONDITION) {
	/*nodes*/
}

visible(name.indexOf('foo') !== 1) { h4 > '~[name]' }

# `8` [Extensibility](#extensibility)

> :warning: It is a low level work with the Mask's Parser and Builder. You would rare need to add here something.

All the statements are based on MaskJS Extensibility. You can easily add new behaviour control, etc.
```javascript
mask.registerStatement(name, function(node, model, ctx, container, ctr){
	// perform smth. with a node and all the subnodes
});

You can even register a custom parser, in case you want to provide some other syntax to parse a node:

mask.registerParser(name, function(string, index, length, parentNode) {
	// perform parsing
	// set the index to the postion, from which
	//    Mask should continue to parse the template
	var node = MyNewNode();
	return [ node,  index ];
});

9 Bindings

📙 Read more...↵

All the above statements can be bound to the model. On the model change UI will be accordingly refreshed. Just add +(plus) sign before

+if (isPanelVisible) {
	div > 'Hello'
}

+switch (state) {
	case ('foo') > i > 'Foo'
	case ('bar') > b > 'Bar'
}
// etc.

---

🏁 If you have any questions, please open an issue or mail us.