todomvc/examples/rappidjs/app/Todo.xml

> Helping you select an MV\* framework

<?xml version="1.0"?>
<app:TodoClass xmlns="http://www.w3.org/1999/xhtml"
			   xmlns:js="js.core" xmlns:ui="js.ui" xmlns:app="app" xmlns:view="app.view" xmlns:conf="js.conf"
			   xmlns:data="js.data">
	<!-- LOCAL STORAGE CONFIGURATION -->
	<data:LocalStorageDataSource cid="dataSource" name="todo-rappidjs">
		<conf:Configuration path="todos" modelClassName="app.model.Todo"
							collectionClassName="app.collection.TodoList"/>
	</data:LocalStorageDataSource>

	<!-- ROUTER CONFIGURATION -->
	<js:Router cid="router">
		<conf:Route name="default" route="^$" onexec="showAll"/>
		<conf:Route name="active" route="^active$" onexec="showActive"/>
		<conf:Route name="completed" route="^completed$" onexec="showCompleted"/>
	</js:Router>

	<!-- HERE WE START TO DEFINE THE UI WITH HTML AND CUSTOM UI COMPONENTS -->
	<section id="todoapp">
		<header id="header">
			<h1>todos</h1>
			<input id="new-todo" placeholder="What needs to be done?" onkeyup="addNewTodo" autofocus="autofocus"/>
		</header>
		<section id="main" visible="{todoList.hasItems()}">
			<input id="toggle-all" type="checkbox" onclick="markAllComplete"
				   checked="{todoList.areAllComplete()}"/>
			<label for="toggle-all">Mark all as complete</label>
			<!-- CUSTOM UI COMPONENT FOR RENDERING A LIST OF ITEMS -> TODOs -->
			<ui:ItemsView items="{filterList.list}" tagName="ul" id="todo-list" itemKey="todo">
				<js:Template name="item">
					<view:TodoView todo="{$todo}" tagName="li" onremove="removeTodo"/>
				</js:Template>
			</ui:ItemsView>
		</section>
		<footer id="footer" data-num="{todoList.numOpenTodos()}" visible="{todoList.hasItems()}">
			<span id="todo-count">
				<strong>{data-num}</strong> {translateItems({data-num})} left
			</span>
			<ul id="filters">
				<li>
					<a href="#/" class="{selectedClass('all',{filterList.filter})}">All</a>
				</li>
				<li>
					<a href="#/active" class="{selectedClass('active',{filterList.filter})}">Active</a>
				</li>
				<li>
					<a href="#/completed" class="{selectedClass('completed',{filterList.filter})}">Completed</a>
				</li>
			</ul>
			<button id="clear-completed" onclick="clearCompleted" visible="{todoList.hasCompletedTodos()}">
				Clear completed ({todoList.numCompletedTodos()})
			</button>
		</footer>
	</section>
	<footer id="info">
		<p>Double-click to edit a todo</p>
		<p>
			Created by <a href="http://github.com/krebbl">Marcus Krejpowicz</a> with<a href="http://rappidjs.com">&lt; rAppid:js/&gt;</a>
			<br/>
			Big credits to <a href="http://github.com/it-ony">Tony Findeisen</a>
		</p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>
</app:TodoClass>