todomvc/examples/derby/views/todos/index.html

> Helping you select an MV\* framework

<Head:>
	<link href="/components/todomvc-common/base.css" rel="stylesheet">

<Title:>
	DerbyJS • TodoMVC

<Header:>
	<ui:connectionAlert>

<Body:>
	<section id="todoapp" data-framework="derby">
		<app:todoHeader>

		<section id="main" class="{#unless _list.shown}hidden{/}">
			<input id="toggle-all" type="checkbox" checked="{noItems(_list.active)}" x-bind=click:clickToggleAll>
			<label for="toggle-all">Mark all as complete</label>
			<ul id="todo-list">{#each _list.shown}<app:todo>{/}</ul>
		</section>

		<app:todoFooter>
	</section>
	<app:info>

<todoHeader:>
	<header id="header">
		<h1>todos</h1>
		<form x-bind=submit:add><input id="new-todo" placeholder="What needs to be done?" value={_newTodo} autofocus></form>
	</header>

<todo:>
	<li data-id={{id}} class="{#if .completed}completed{else}active{/}{#if ._editing} editing{/}">
		<div class="view">
			<input class="toggle" type="checkbox" checked="{.completed}">
			<label x-bind=dblclick:startEdit>{.text}</label>
			<button class="destroy" x-bind=click:del></button>
		</div>
		<form x-bind=submit:submitEdit>
			<input class="edit" x-bind=blur:endEdit value="{.text}">
		</form>
	</li>

<todoFooter:>
	<footer id="footer" class="{#unless _list.all}hidden{/}">
		<span id="todo-count"><strong>{_list.active.length}</strong> item{#unless oneItem(_list.active)}s{/} left</span>
		<ul id="filters">
			<li>
				<a href="/{{_groupName}}" class="{#if equal(_list.filterName, 'all')}selected{/}">All</a>
			</li>
			<li>
				<a href="/{{_groupName}}/active" class="{#if equal(_list.filterName, 'active')}selected{/}">Active</a>
			</li>
			<li>
				<a href="/{{_groupName}}/completed" class="{#if equal(_list.filterName, 'completed')}selected{/}">Completed</a>
			</li>
		</ul>
		<button x-bind=click:clearCompleted id="clear-completed" class="{#unless _list.completed}non-completed{/}">
			Clear completed (<span>{_list.completed.length}</span>)
		</button>
	</footer>

<info:>
	<footer id="info">
		<h3>Open this <a href="/{{_groupName}}">app</a> in another browser, or share it with a friend to collaborate!</h3>
		<p>Click on a todo to edit</p>
		<p>Created by <a href="http://micknelson.wordpress.com">Michael Nelson</a> and <a href="https://github.com/lackac">László Bácsi</a></p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>