Permalink
Browse files

Updating with latest version from TodoMVC

As requested in #1044, here's the latest version of the Backbone.js
Todo app as rewritten by our project.

We started out with the 0.5 base and re-wrote it to cover some subtle
best practices we thought were important. Ours, like the current one
also uses the latest Backbone and jQuery 1.7.1. As part of the changes,
we also introduced two differences in the UX:

* When in edit mode, if a todo item is emptied and then blurred, the
item is removed. This contrasts with the current behaviour of the app
in the official repo at the moment which maintains the empty item in
place (albeit looking a little broken
http://addyosmani.com/gyazo/bbd4cd.png)

* We removed the tooltip occasionally seen when a user was trying to
add a new item. Having discussed this with developers frequently using
the Todo app as an initial point of reference, it was a consensus that
the notification didn't really offer that much value nor did it really
show anything that Backbone-specific worth keeping it in for.

We usually enforce examples separate concerns (Models, Views etc.) into
their own directories pre-build, but I've reformatted it to match the
structure your current app takes so that it can be more easily diffed.

I hope it's worth considering our version for a merge. We're happy to
take on any feedback needed to update it to address concerns you might
have.
  • Loading branch information...
1 parent dca02ec commit 3cf1bb4ed51a47a87c50a56896a10e2fe597172a @addyosmani committed Feb 27, 2012
Showing with 321 additions and 418 deletions.
  1. +45 −69 examples/todos/index.html
  2. +183 −283 examples/todos/todos.css
  3. +93 −66 examples/todos/todos.js
View
@@ -1,87 +1,63 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Backbone.js Todos</title>
+ <link rel="stylesheet" href="todos.css"/>
+</head>
+<body>
+ <div id="todoapp">
+ <header>
+ <h1>Todos</h1>
+ <input id="new-todo" type="text" placeholder="What needs to be done?">
+ </header>
+
+ <section id="main">
+ <input id="toggle-all" type="checkbox">
+ <label for="toggle-all">Mark all as complete</label>
+ <ul id="todo-list">
+ </ul>
+ </section>
+
+ <footer>
+ <a id="clear-completed">Clear completed</a>
+ <div id="todo-count"></div>
+ </footer>
+ </div>
+ <div id="instructions">
+ Double-click to edit a todo.
+ </div>
+ <div id="credits">
+ Created by
+ <br />
+ <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>.
+ <br />Rewritten by: <a href="http://addyosmani.github.com/todomvc">TodoMVC</a>.
+ </div>
- <head>
- <title>Backbone Demo: Todos</title>
- <link href="todos.css" media="all" rel="stylesheet" type="text/css"/>
<script src="../../test/vendor/json2.js"></script>
<script src="../../test/vendor/jquery-1.7.1.js"></script>
<script src="../../test/vendor/underscore-1.3.1.js"></script>
<script src="../../backbone.js"></script>
<script src="../backbone-localstorage.js"></script>
<script src="todos.js"></script>
- </head>
-
- <body>
-
- <!-- Todo App Interface -->
-
- <div id="todoapp">
-
- <div class="title">
- <h1>Todos</h1>
- </div>
-
- <div class="content">
-
- <div id="create-todo">
- <input id="new-todo" placeholder="What needs to be done?" type="text" />
- <span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
- </div>
-
- <div id="todos">
- <ul id="todo-list"></ul>
- </div>
-
- <div id="todo-stats"></div>
-
- </div>
-
- </div>
-
- <ul id="instructions">
- <li>Double-click to edit a todo.</li>
- <li><a href="../../docs/todos.html">View the annotated source.</a></li>
- </ul>
-
- <div id="credits">
- Created by
- <br />
- <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
- </div>
<!-- Templates -->
<script type="text/template" id="item-template">
- <div class="todo <%= done ? 'done' : '' %>">
- <div class="display">
- <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
- <div class="todo-text"></div>
- <span class="todo-destroy"></span>
- </div>
- <div class="edit">
- <input class="todo-input" type="text" value="" />
+ <div class="view">
+ <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
+ <label><%= title %></label>
+ <a class="destroy"></a>
</div>
- </div>
+ <input class="edit" type="text" value="<%= title %>" />
</script>
<script type="text/template" id="stats-template">
- <% if (total) { %>
- <span class="todo-count">
- <span class="number"><%= remaining %></span>
- <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
- </span>
- <% } %>
- <% if (done) { %>
- <span class="todo-clear">
- <a href="#">
- Clear <span class="number-done"><%= done %></span>
- completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
- </a>
- </span>
- <% } %>
+ <% if (done) { %>
+ <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
+ <% } %>
+ <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
</script>
- </body>
-
+</body>
</html>
Oops, something went wrong.

0 comments on commit 3cf1bb4

Please sign in to comment.