examples/todomvc_fancy/index.html
<!doctype html>
<html lang="en" data-framework="milo">
<head>
<meta charset="utf-8">
<title>Milo • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo"
placeholder="What needs to be done?"
autofocus
ml-bind="[data, events]:newTodo">
</header>
<section id="main">
<input id="toggle-all"
type="checkbox"
ml-bind="[data]:toggleAll">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" ml-bind="[list]:todos">
<li ml-bind="[item]:todo">
<div class="view">
<input class="toggle"
type="checkbox"
ml-bind="[data]:completed">
<label>
<span ml-bind="[data]:title"
contenteditable="true"></span>
</label>
<button class="destroy"
ml-bind="[events]:deleteBtn"></button>
</div>
</li>
</ul>
</section>
<footer id="footer" ml-bind="[dom]:footer">
<span id="todo-count" ml-bind="[data]:activeCounter"></span>
<ul id="filters">
<li>
<a href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed"
ml-bind="[dom, events]:clearCompletedBtn">
Clear completed (<span ml-bind="[data]:completedCounter"></span>)
</button>
</footer>
</section>
<footer id="info">
<p>Click to edit a todo</p>
<p>Created by <a href="http://www.dailymail.co.uk">Daily Mail</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
<h3>Model</h3>
<div ml-bind="[data]:modelView"></div>
</footer>
<!-- <script src="bower_components/milo/milo.bundle.js"></script> -->
<script src="../../dist/milo.bundle.js"></script>
<script src="js/app.js"></script>
</body>
</html>