examples/component.html

<!DOCTYPe html>
<html>
<head>
	
	<script type='text/mask' id='layout'>
		UserProfile;
	</script>
	
	<script type='text/mask' id='user-template'>
		div >
			input type=text >
				dualbind
					value=username
					// override event, @defaut: `change`
					change-event=keyup
					
					// emit signal on every change
					x-signal='dom: usernameChanged'
					;
		
		div >
			textarea >
				dualbind
					value=description
					chage-event=keyup
					x-signal='dom: descriptionChanged'
					;
		
		button.test-event > 'Test Event'
		button.test-signal x-signal='click: slotSignalTest' > 'Slot Test'
		
		hr;
		h4.status > '~[bind:status]'
	</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('UserProfile', mask.Compo({
			template: document.querySelector('#user-template').textContent,
			
			events: {
				'click: button.test-event': function(){
					this.model.status = 'testEventHandled';
				}
			},
			slots: {
				slotSignalTest: function(){
					this.model.status = 'testSlotHandled';
				},
				
				descriptionChanged: function(sender, value){
					this.model.status = 'descriptionChanged ' + value;
				},
				usernameChanged: function(sender, value){
					this.model.status = 'usernameChanged ' + value;
				}
			},
			
			compos: {
				// `jquery` search
				testEventButton: '$: .test-event',
				// `querySelector` search
				textarea: 'textarea'
			},
			
			// override model
			model: {
				username: 'Baz',
				description: 'Lorem'
			}
		}));
		
		window.onload = function(){
			
			var App = mask.Compo({
				template: document.querySelector('#layout').textContent
			});
			
			window.app = mask.Compo.initialize(App, null, document.body);
			
		};
		
	</script>
</head>

<body></body>
</html>