Commit 81906dc8 authored by Pascal Hartig's avatar Pascal Hartig

ts+backbone: Fixed footer, remaining count

The remaining todos counter was the same bug fixed in
89e5d5c7.

\#main and \#footer weren't hidden if there were no todos in the list.
parent 92fe080c
......@@ -11,20 +11,20 @@ var Todo = (function (_super) {
}
Todo.prototype.defaults = function () {
return {
content: "empty todo...",
content: '',
done: false
};
};
Todo.prototype.initialize = function () {
if(!this.get("content")) {
if(!this.get('content')) {
this.set({
"content": this.defaults().content
'content': this.defaults().content
});
}
};
Todo.prototype.toggle = function () {
this.save({
done: !this.get("done")
done: !this.get('done')
});
};
Todo.prototype.clear = function () {
......@@ -38,7 +38,7 @@ var TodoList = (function (_super) {
_super.apply(this, arguments);
this.model = Todo;
this.localStorage = new Store("todos-backbone");
this.localStorage = new Store('todos-typescript-backbone');
}
TodoList.prototype.done = function () {
return this.filter(function (todo) {
......@@ -63,13 +63,13 @@ var Todos = new TodoList();
var TodoView = (function (_super) {
__extends(TodoView, _super);
function TodoView(options) {
this.tagName = "li";
this.tagName = 'li';
this.events = {
"click .check": "toggleDone",
"dblclick label.todo-content": "edit",
"click button.destroy": "clear",
"keypress .todo-input": "updateOnEnter",
"blur .todo-input": "close"
'click .check': 'toggleDone',
'dblclick label.todo-content': 'edit',
'click button.destroy': 'clear',
'keypress .todo-input': 'updateOnEnter',
'blur .todo-input': 'close'
};
_super.call(this, options);
this.template = _.template($('#item-template').html());
......@@ -77,6 +77,7 @@ var TodoView = (function (_super) {
this.model.bind('change', this.render);
this.model.bind('destroy', this.remove);
}
TodoView.ENTER_KEY = 13;
TodoView.prototype.render = function () {
this.$el.html(this.template(this.model.toJSON()));
this.input = this.$('.todo-input');
......@@ -86,17 +87,17 @@ var TodoView = (function (_super) {
this.model.toggle();
};
TodoView.prototype.edit = function () {
this.$el.addClass("editing");
this.$el.addClass('editing');
this.input.focus();
};
TodoView.prototype.close = function () {
this.model.save({
content: this.input.val()
});
this.$el.removeClass("editing");
this.$el.removeClass('editing');
};
TodoView.prototype.updateOnEnter = function (e) {
if(e.keyCode == 13) {
if(e.keyCode == TodoView.ENTER_KEY) {
close();
}
};
......@@ -110,16 +111,16 @@ var AppView = (function (_super) {
function AppView() {
_super.call(this);
this.events = {
"keypress #new-todo": "createOnEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear button": "clearCompleted",
"click .mark-all-done": "toggleAllComplete"
'keypress #new-todo': 'createOnEnter',
'click .todo-clear button': 'clearCompleted',
'click .mark-all-done': 'toggleAllComplete'
};
this.tooltipTimeout = null;
this.setElement($("#todoapp"), true);
this.setElement($('#todoapp'), true);
_.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
this.input = this.$("#new-todo");
this.allCheckbox = this.$(".mark-all-done")[0];
this.input = this.$('#new-todo');
this.allCheckbox = this.$('.mark-all-done')[0];
this.mainElement = this.$('#main')[0];
this.footerElement = this.$('#footer')[0];
this.statsTemplate = _.template($('#stats-template').html());
Todos.bind('add', this.addOne);
Todos.bind('reset', this.addAll);
......@@ -129,18 +130,25 @@ var AppView = (function (_super) {
AppView.prototype.render = function () {
var done = Todos.done().length;
var remaining = Todos.remaining().length;
if(Todos.length) {
this.mainElement.style.display = 'block';
this.footerElement.style.display = 'block';
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: done,
remaining: remaining
}));
} else {
this.mainElement.style.display = 'none';
this.footerElement.style.display = 'none';
}
this.allCheckbox.checked = !remaining;
};
AppView.prototype.addOne = function (todo) {
var view = new TodoView({
model: todo
});
this.$("#todo-list").append(view.render().el);
this.$('#todo-list').append(view.render().el);
};
AppView.prototype.addAll = function () {
Todos.each(this.addOne);
......@@ -165,20 +173,6 @@ var AppView = (function (_super) {
});
return false;
};
AppView.prototype.showTooltip = function (e) {
var tooltip = $(".ui-tooltip-top");
var val = this.input.val();
tooltip.fadeOut();
if(this.tooltipTimeout) {
clearTimeout(this.tooltipTimeout);
}
if(val == '' || val == this.input.attr('placeholder')) {
return;
}
this.tooltipTimeout = _.delay(function () {
return tooltip.show().fadeIn();
}, 1000);
};
AppView.prototype.toggleAllComplete = function () {
var done = this.allCheckbox.checked;
Todos.each(function (todo) {
......
......@@ -143,7 +143,7 @@ class TodoList extends Backbone.Collection {
// Filter down the list to only todo items that are still not finished.
remaining() {
return this.without(this.done());
return this.without.apply(this, this.done());
}
// We keep the Todos in sequential order, despite being saved by unordered
......@@ -254,6 +254,8 @@ class AppView extends Backbone.View {
input: any;
allCheckbox: HTMLInputElement;
mainElement: HTMLElement;
footerElement: HTMLElement;
statsTemplate: (params: any) => string;
constructor () {
......@@ -269,6 +271,8 @@ class AppView extends Backbone.View {
this.input = this.$('#new-todo');
this.allCheckbox = this.$('.mark-all-done')[0];
this.mainElement = this.$('#main')[0];
this.footerElement = this.$('#footer')[0];
this.statsTemplate = _.template($('#stats-template').html());
Todos.bind('add', this.addOne);
......@@ -284,11 +288,19 @@ class AppView extends Backbone.View {
var done = Todos.done().length;
var remaining = Todos.remaining().length;
if (Todos.length) {
this.mainElement.style.display = 'block';
this.footerElement.style.display = 'block';
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: done,
remaining: remaining
}));
} else {
this.mainElement.style.display = 'none';
this.footerElement.style.display = 'none';
}
this.allCheckbox.checked = !remaining;
}
......
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