example1.html

<html>
	<body>
		<h1>Click the Traffic Light<h1>
	    <traffic-lignt></traffic-lignt>
	    <script type="riot/tag">
			<traffic-lignt>
				<div class={color=='red'?"red":"green"} onclick={click}></div>
				<style scoped>
					div {
						width:100px;
						height:100px;
						border-radius:50%;
					}
					.red {
						background-color:red;
					}
					.green {
						background-color:green;
					}
				</style>
				var self = this;
				this.color = tsore.store('trafficLight').getState();

				click() {
					tsore.action('Trigger');
				};

				tsore.on('change',function(){
					self.color = tsore.store('trafficLight').getState();
					self.update();
				});
			</traffic-lignt>
	    </script>
		<script src="riot+compiler.js"></script>
	    <script src="tsore.js"></script>
	    <script>
				var trafficLight = new tsore.Store(
			    	function(){
			    		var state = 'red';

			    		this.getState = function(){
			    			return state;
			    		};
				    	
				    	// Event
				    	this.on('Trigger', function(){
			    			state = state == 'red'?'green':'red';
			    			tsore.trigger('change');				    		
				    	});

				    	// For all triggers
				    	this.on(function(action){
				    		console.log(action, state);
				    	});
			    	}
				);
				tsore.register('trafficLight', trafficLight);

	    	riot.mount('*');
	    </script>
	</body>
</html>