-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (85 loc) · 4.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="en" data-framework="syringe">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Syringe - Todos Example</title>
<link rel="stylesheet" href="lib/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header" data-syringe-add="todos.hd">
<h1>todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?" data-syringe-add="todos.nt">
</header>
<section id="main" style="display: none;" data-syringe-add="todos.mn">
<input id="toggle-all" type="checkbox" data-syringe-add="todos.ta">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-syringe-add="todos.tl">
<li data-syringe-add="todos.li"></li>
</ul>
</section>
<footer id="footer" style="display: none;" data-syringe-add="todos.ft"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="mailto:[email protected]">Michael Holt</a></p>
<p>Todo styling courtesy of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="lib/director/director.min.js"></script>
<script src="lib/syringe/syringe.min.js"></script>
<script src="lib/syringe/syringe.mixins.js"></script>
<script type="text/javascript">
// Add internal pointers to our DOM management library and all
// relevant page elements
window.Syringe.add({
// Todo list item
'app.templates.todolist': _.template(' \
<% todolist.forEach(function (item, idx, list) { %> \
<li id="<%= item.id %>" <% if(item.completed) { %>class="completed"<% } %>> \
<div class="view"> \
<input type="checkbox" class="toggle" <% if(item.completed) { %> checked="checked" <% } %>/> \
<label><%= item.title %></label> \
<button class="destroy"></button> \
</div> \
<input class="edit" value="<%= item.title %>"> \
</li> \
<% }); %>'),
// Filter blocks for "show" state
'app.templates.filters': _.template(' \
<span id="todo-count"><strong><%= active %></strong> item<% if(active !== 1){ %>s<% } %> left</span> \
<ul id="filters"> \
<li data-show="all"> \
<a <% if (state.show === "all") { %>class="selected"<% } %> href="#/">All</a> \
</li> \
<li data-show="active"> \
<a <% if (state.show === "active") { %>class="selected"<% } %> href="#/active">Active</a> \
</li> \
<li data-show="completed"> \
<a <% if (state.show === "completed") { %>class="selected"<% } %> href="#/completed">Completed</a> \
</li> \
</ul> \
<% if (completed !== 0) { %> \
<button id="clear-completed">Clear completed (<%= completed %>)</button> \
<% } %>'),
// Checkbox for "toggle-all"
'app.templates.toggleall': _.template(' \
<input <% if (checked) { %>checked="checked"<% } %> type="checkbox" id="toggle-all"> \
')
});
</script>
<script src="js/models/todo.js"></script>
<script src="js/collections/todolist.js"></script>
<script src="js/views/todolist.js"></script>
<script src="js/views/filters.js"></script>
<script src="js/views/toggleall.js"></script>
<script src="js/controllers/state.js"></script>
<script src="js/controllers/routing.js"></script>
<script src="js/controllers/proxies.js"></script>
<script src="js/controllers/actions.js"></script>
<script src="js/controllers/helpers.js"></script>
<script src="js/app.js"></script>
</body>
</html>