Commit 9a4f81c7 authored by Aaron Boushley's avatar Aaron Boushley

Merge branch 'master' into emberjs

parents 6cb6153c fd14f902
......@@ -83,6 +83,7 @@
<li><a href="todo-example/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="todo-example/spine/index.html">Spine.js</a></li>
<li><a href="todo-example/backbone/index.html">Backbone.js</a></li>
<li><a href="todo-example/backbone_require/index.html">Backbone.js + RequireJS</a></li>
<li><a href="todo-example/sammyjs/index.html">Sammy.js</a></li>
<li><a href="todo-example/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="todo-example/yuilibrary/index.html">YUILibrary</a></li>
......@@ -204,4 +205,4 @@
</div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -364,7 +364,6 @@ body {
width: 170px;
left: 50%;
margin-left: -85px;
opacity: 0;
}
/* line 55 */
#todoapp .content ul#todo-list {
......
......@@ -22,6 +22,8 @@
</div>
<div id="todos">
<input class="check mark-all-done" type="checkbox"/>
<label for="check-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</div>
......
......@@ -19,10 +19,9 @@ define(['underscore', 'backbone'], function(_, Backbone) {
this.save({done: !this.get("done")});
},
// Remove this Todo from *localStorage* and delete its view.
// Remove this Todo from *localStorage*.
clear: function() {
this.destroy();
this.view.remove();
}
});
......
<div class="todo <%= done ? 'done' : '' %>">
<div class="display">
<input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<div class="todo-content"></div>
<div class="todo-content"><%= content %></div>
<span class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
<input class="todo-input" type="text" value="<%= content %>" />
</div>
</div>
......@@ -19,16 +19,18 @@ define([
events: {
"keypress #new-todo": "createOnEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear a": "clearCompleted"
"click .todo-clear a": "clearCompleted",
"click .mark-all-done": "toggleAllComplete"
},
// At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
initialize: function() {
_.bindAll(this, 'addOne', 'addAll', 'render');
_.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
this.input = this.$("#new-todo");
this.allCheckbox = this.$(".mark-all-done")[0];
Todos.bind('add', this.addOne);
Todos.bind('reset', this.addAll);
......@@ -41,11 +43,15 @@ define([
// of the app doesn't change.
render: function() {
var done = Todos.done().length;
var remaining = Todos.remaining().length;
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: Todos.done().length,
remaining: Todos.remaining().length
done: done,
remaining: remaining
}));
this.allCheckbox.checked = !remaining;
},
// Add a single todo item to the list by creating a view for it, and
......@@ -93,6 +99,12 @@ define([
if (val == '' || val == this.input.attr('placeholder')) return;
var show = function(){ tooltip.show().fadeIn(); };
this.tooltipTimeout = _.delay(show, 1000);
},
// Change each todo so that it's `done` state matches the check all
toggleAllComplete: function () {
var done = this.allCheckbox.checked;
Todos.each(function (todo) { todo.save({'done': done}); });
}
});
......
......@@ -17,33 +17,24 @@ define([
"click .check" : "toggleDone",
"dblclick div.todo-content" : "edit",
"click span.todo-destroy" : "clear",
"keypress .todo-input" : "updateOnEnter"
"keypress .todo-input" : "updateOnEnter",
"blur .todo-input" : "close"
},
// The TodoView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a **Todo** and a **TodoView** in this
// app, we set a direct reference on the model for convenience.
initialize: function() {
_.bindAll(this, 'render', 'close');
_.bindAll(this, 'render', 'close', 'remove');
this.model.bind('change', this.render);
this.model.view = this;
this.model.bind('destroy', this.remove);
},
// Re-render the contents of the todo item.
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
this.setContent();
return this;
},
// To avoid XSS (not that it would be harmful in this particular app),
// we use `jQuery.text` to set the contents of the todo item.
setContent: function() {
var content = this.model.get('content');
this.$('.todo-content').text(content);
this.input = this.$('.todo-input');
this.input.bind('blur', this.close);
this.input.val(content);
return this;
},
// Toggle the `"done"` state of the model.
......@@ -68,11 +59,6 @@ define([
if (e.keyCode == 13) this.close();
},
// Remove this view from the DOM.
remove: function() {
$(this.el).remove();
},
// Remove the item, destroy the model.
clear: function() {
this.model.clear();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment