examples/interpolation.html

<!DOCTYPe html>
<html>
<head>
	
	<script type='text/mask' id='layout'>
		h4.model {
			// model accessor
			div > 'Section: ~[sectionTitle]'
			
			// expression
			small > em > '~[: sectionTitle.toLowerCase() ]'
		}
		
		// extract user's model sample
		with(user) {
		
			:user .user-compo {
				// components scope sample
				h6 > '~[userTitle]'
				
				// interpolation util
				.user-date > '~[format:date]'
			}
		}
		
		select #themes {
			each(themes) {
				option name='~[.]' > '~[.]'
			}
		}
		
		// expression
		h6.settings >
			'Settings ~[: settings.amount * 100 / 2 ]'
		
	</script>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src='../lib/mask.js'></script>
	<script>
		
		mask.registerHandler(':user', mask.Compo({
			tagName: 'div',
			scope: {
				userTitle: '"User" Component'
			}
		}));
		
		mask.registerUtil('format', function(key, model){
			var date = model[key];
			return date.getFullYear() + '-' + date.getMonth();
		});
		
		window.onload = function(){
			var template = document.querySelector('#layout').textContent,
				model = {
					sectionTitle: 'Interpolations',
					user: {
						date: new Date(2014, 0, 1)
					},
					settings: {
						theme: 'default',
						amount: 2
					},
					themes: [
						'default',
						'dark'
					]
				}
				fragment = mask.render(template, model);
			
			document.body.appendChild(fragment);
		};
		
	</script>
</head>

<body></body>
</html>