todomvc
Version:
> Helping you select an MV\* framework
68 lines (57 loc) • 2 kB
HTML
<html lang="en" data-framework="serenadejs">
<head>
<meta charset="utf-8">
<title>Serenade.js • TodoMVC</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
</head>
<body>
<script id="app" type="text/serenade">
section#todoapp
header#header
form[event:submit=newTodo!]
h1 "todos"
input#new-todo[binding:change=@newTitle placeholder="What needs to be done?" autofocus="autofocus"]
- if @allCount
section#main
input#toggle-all[type="checkbox" binding:change=@allCompleted]
label[for="toggle-all"] "Mark all as complete"
ul#todo-list
- collection @filtered
- view "todo"
footer#footer
span#todo-count
strong @activeCount
" "
@label
ul#filters
li
a.all[class:selected=@filterAll href="#/"] "All"
li
a.active[class:selected=@filterActive href="#/active"] "Active"
li
a.completed[class:selected=@filterCompleted href="#/completed"] "Completed"
- if @completedCount
button#clear-completed[event:click=clearCompleted]
"Clear completed (" @completedCount ")"
</script>
<script id="todo" type="text/serenade">
li[class:editing=@edit class:completed=@completed]
form[event:submit=edited!]
input.edit[on:load=loadField event:blur=edited! binding:change=@title]
- unless @edit
input.toggle[type="checkbox" binding:change=@completed]
label[event:dblclick=edit] @title
button.destroy[event:click=removeTodo]
</script>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://elabs.se">Elabs</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="js/lib/serenade.js"></script>
<script src="js/app.js"></script>
</body>
</html>