examples/statements.html

<!DOCTYPe html>
<html>
<head>
	
	<script type='text/mask' id='layout'>
		
		// IF
		if (one) {
			.if-one > '
				(if) <if> Should be rendered
			'
		}
		
		if (!one) {
			.none > '(if-else) <if> If should not be rendered'
		} else {
			.if-one-else > '
				(if-else) <else> Should be rendered
			'
		}
		
		// SWITCH
		switch (one + 1) {
			case (1) {
				.switch-not-expect;
			}
			case (2) {
				.switch-expect;
			}
			default {
				.switch-not-expect;
			}
		}
		
		// FOR..OF
		for (user of users) {
			.for-of > '(for..of) Should be rendered twice ~[user.name]'
		}
		for ((user, index) of users) {
			.for-of > '(for..of) Should be rendered twice ~[user.name]'
		}
		
		// FOR..IN
		for (key in settings) {
			.for-in > '(for..in) Should be rendered twice ~[key]'
		}
		for ((key, value) in settings) {
			.for-in > '(for..in) Should be rendered twice ~[key]: ~[value]'
		}
		
		// EACH
		each(users) {
			.each > '(each) Should be rendered twice ~[name]'
		}
		
	</script>
	
	<script src='../lib/mask.js'></script>
	<script>
		
		window.onload = function(){
			var template = document.querySelector('#layout').textContent,
				model = {
					one: 1,
					users: [
						{ name: 'foo' },
						{ name: 'baz' }
					],
					settings: {
						theme: 'default',
						amount: 2
					}
				}
				fragment = mask.render(template, model);
			
			document.body.appendChild(fragment);
		};
		
	</script>
</head>

<body></body>
</html>