todomvc
Version:
> Helping you select an MV\* framework
82 lines (76 loc) • 2.93 kB
HTML
<html lang="en" data-framework="batman">
<head>
<meta charset="utf-8">
<title>Batman • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<div data-yield="header"></div>
</header>
<div data-yield="main"></div>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://batmanjs.org">Harry Brundage</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<div data-defineview="todos/index">
<div data-contentfor="header">
<form data-event-submit="createTodo">
<input id="new-todo" type="text" placeholder="What needs to be completed?" autofocus>
</form>
</div>
<section id="main" class="hidden" data-removeclass-hidden="Todo.all.length">
<input id="toggle-all" type="checkbox" data-event-change="toggleAll" data-source="Todo.completed.length | equals Todo.all.length">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li data-foreach-todo="Todo[currentTodoSet]"
data-context="todo"
data-addclass-completed="completed"
data-addclass-editing="editing" >
<div class="view" data-hideif="editing">
<input class="toggle" type="checkbox" data-bind="completed">
<label data-bind="title" data-event-doubleclick="toggleEditing"></label>
<button class="destroy" data-event-click="destroyTodo"></button>
</div>
<input class="edit" type="text"
data-bind="title"
data-bind-id="'todo-input-' | append id"
data-event-blur="toggleEditing"
data-event-keypress="disableEditingOnEnter">
</li>
</ul>
</section>
<footer id="footer" class="hidden" data-removeclass-hidden="Todo.all.length">
<span id="todo-count">
<strong data-bind="Todo.active.length"></strong>
<span data-bind="'item' | pluralize Todo.active.length, false"></span> left
</span>
<ul id="filters">
<li>
<a data-addclass-selected="currentTodoSet | equals 'all'" data-route="routes.all">All</a>
</li>
<li>
<a data-addclass-selected="currentTodoSet | equals 'active'" data-route="routes.active">Active</a>
</li>
<li>
<a data-addclass-selected="currentTodoSet | equals 'completed'" data-route="routes.completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-event-click="clearCompleted" data-showif="Todo.completed.length">
Clear completed (<span data-bind="Todo.completed.length"></span>)
</button>
</footer>
</div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/batman/lib/dist/batman.js"></script>
<script src="app.js"></script>
<script>
Alfred.run()
</script>
</body>
</html>