Skip to content

Commit

Permalink
Updating with latest version from TodoMVC
Browse files Browse the repository at this point in the history 
As requested in jashkenas#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
@addyosmani
addyosmani committed Feb 27, 2012
1 parent dca02ec commit 3cf1bb4
Show file tree
Hide file tree
Showing 3 changed files with 321 additions and 418 deletions.
114 changes: 45 additions & 69 deletions examples/todos/index.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 3cf1bb4

Please sign in to comment.