vue2/examples/todomvc/index.html

77 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Todo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="common/base.css">
</head>
<body>
<section id="todoapp" sd-controller="todos">
<header id="header">
<h1>todos</h1>
<input
id="new-todo"
autofocus
autocomplete="off"
placeholder="What needs to be done?"
sd-value="newTodo"
sd-on="keyup:addTodo | key enter"
>
</header>
<section id="main" sd-show="total">
<input
id="toggle-all"
type="checkbox"
sd-checked="allDone"
>
<ul id="todo-list">
<li
class="todo"
sd-each="todo:todos"
sd-show="todoFiltered"
sd-class="completed:todo.completed, editing:todo.editing"
>
<div class="view">
<input
class="toggle"
type="checkbox"
sd-checked="todo.completed"
sd-on="change:toggleTodo"
>
<label sd-text="todo.title" sd-on="dblclick:editTodo"></label>
<button class="destroy" sd-on="click:removeTodo"></button>
</div>
<input
class="edit"
type="text"
sd-focus="todo.editing"
sd-on="blur:doneEdit, keyup:doneEdit | key enter, keyup:cancelEdit | key esc"
sd-value="todo.title"
>
</li>
</ul>
</section>
<footer id="footer" sd-show="total">
<span id="todo-count">
<strong sd-text="remaining"></strong> {{remaining | pluralize item}} left
</span>
<ul id="filters">
<li><a href="#/all" sd-class="selected:filterSelected">All</a></li>
<li><a href="#/active" sd-class="selected:filterSelected">Active</a></li>
<li><a href="#/completed" sd-class="selected:filterSelected">Completed</a></li>
</ul>
<button id="clear-completed" sd-on="click:removeCompleted" sd-show="completed">
Remove Completed ({{completed}})
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Powered by <a href="https://github.com/yyx990803/seed">Seed.js</a></p>
<p>Created by <a href="http://evanyou.me">Evan You</a></p>
</footer>
<script src="../../dist/seed.js"></script>
<script src="js/todoStorage.js"></script>
<script src="js/app.js"></script>
</body>
</html>