freekrai/store_example.html

## store_example.html
<!DOCTYPE html>
<html>
	<body>
		<h1>Todo List</h1>
		<form id="todo_form" method="post" accept-charset="utf-8">
			<p><input type="text" name="todo_field" value="" id="todo_field" /><input type="submit" value="Create Todo" /></p>
		</form>
		<p>You have <span id="todo_count">?</span> todos remaining.</p>
		<div id="todo_list_wrapper"></div>

		<script src="js/lib/store.js"></script>
		<script type="text/javascript" charset="utf-8">
			var todo_table = new Store('todos');
			document.addEventListener('Storecommit', get_all, false);
			var count = document.getElementById('todo_count');
			var form = document.getElementById('todo_form');
			var wrapper = document.getElementById('todo_list_wrapper');
			var field = document.getElementById('todo_field');

			form.addEventListener('submit', function(e){
				e.preventDefault();
				if(field.value!=''); {
					todo_table.insert({
						'description':field.value,
						'status':1
					});
				}
				field.value = '';
			}, false);
			wrapper.addEventListener('click', handle_click, false);
			init();

			function handle_click(e) {
				e.preventDefault();
				if(e.target.hash=="#delete") {
					todo_table.delete('id', e.target.id);
				}
				if(e.target.hash=="#done") {
					todo_table.update('id', e.target.id, {'status':0});
				}
				if(e.target.hash=="#undo") {
					todo_table.update('id', e.target.id, {'status':1});
				}
			}

			function init() {
				get_all();
			}

			function get_all(e) {
				var todos = todo_table.selectAll();
				count.innerHTML = todos.length;
				var html = '';
				if (todos.length == 0) {
					html = '<p>Hooray!</p>';
				} else {
					html+= '<ul>';
					for (var i=0; i < todos.length; i++) {
						if( todos[i].status == 1 ){
							html+= '<li><a href="#delete" id="' + todos[i].id+'">[delete]</a> <a href="#done" id="' + todos[i].id+'">[done]</a> <span>'+todos[i].description+'</span></li>';
						}else{
							html+= '<li><a href="#delete" id="' + todos[i].id+'">[delete]</a> <a href="#undo" id="' + todos[i].id+'">[not done]</a> <span style="text-decoration: line-through;">'+todos[i].description+'</span></li>';
						}
					}
				}
				wrapper.innerHTML = html;
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<h1>Todo List</h1>
	<form id="todo_form" method="post" accept-charset="utf-8">
	<p><input type="text" name="todo_field" value="" id="todo_field" /><input type="submit" value="Create Todo" /></p>
	</form>
	<p>You have <span id="todo_count">?</span> todos remaining.</p>
	<div id="todo_list_wrapper"></div>

	<script src="js/lib/store.js"></script>
	<script type="text/javascript" charset="utf-8">
	var todo_table = new Store('todos');
	document.addEventListener('Storecommit', get_all, false);
	var count = document.getElementById('todo_count');
	var form = document.getElementById('todo_form');
	var wrapper = document.getElementById('todo_list_wrapper');
	var field = document.getElementById('todo_field');

	form.addEventListener('submit', function(e){
	e.preventDefault();
	if(field.value!=''); {
	todo_table.insert({
	'description':field.value,
	'status':1
	});
	}
	field.value = '';
	}, false);
	wrapper.addEventListener('click', handle_click, false);
	init();

	function handle_click(e) {
	e.preventDefault();
	if(e.target.hash=="#delete") {
	todo_table.delete('id', e.target.id);
	}
	if(e.target.hash=="#done") {
	todo_table.update('id', e.target.id, {'status':0});
	}
	if(e.target.hash=="#undo") {
	todo_table.update('id', e.target.id, {'status':1});
	}
	}

	function init() {
	get_all();
	}

	function get_all(e) {
	var todos = todo_table.selectAll();
	count.innerHTML = todos.length;
	var html = '';
	if (todos.length == 0) {
	html = '<p>Hooray!</p>';
	} else {
	html+= '<ul>';
	for (var i=0; i < todos.length; i++) {
	if( todos[i].status == 1 ){
	html+= '<li><a href="#delete" id="' + todos[i].id+'">[delete]</a> <a href="#done" id="' + todos[i].id+'">[done]</a> <span>'+todos[i].description+'</span></li>';
	}else{
	html+= '<li><a href="#delete" id="' + todos[i].id+'">[delete]</a> <a href="#undo" id="' + todos[i].id+'">[not done]</a> <span style="text-decoration: line-through;">'+todos[i].description+'</span></li>';
	}
	}
	}
	wrapper.innerHTML = html;
	}
	</script>
	</body>
	</html>