Skip to content

T
todomvc
Commit d82fcf5a authored by Pascal Hartig's avatar Pascal Hartig
Browse files
Options

Merge pull request #616 from stephenplusplus/flight-bug 

(flight) bug with clearCompleted.
parents d50f6e65 cceaffa8
Hide whitespace changes
Inline Side-by-side
Showing with 355 additions and 399 deletions
dependency-examples/flight/app/js/app.js
View file @ d82fcf5a
/*global define */
'use strict';
define(
[
'./data/todos',
'./data/stats',
'./ui/new_item',
'./ui/todo_list',
'./ui/stats',
'./ui/main_selector',
'./ui/toggle_all'
],
define([
'./data/todos',
'./data/stats',
'./ui/new_item',
'./ui/todo_list',
'./ui/stats',
'./ui/main_selector',
'./ui/toggle_all'
], function (TodosData, StatsData, NewItemUI, TodoListUI, StatsUI, MainSelectorUI, ToggleAllUI) {
var initialize = function () {
StatsData.attachTo(document);
TodosData.attachTo(document);
NewItemUI.attachTo('#new-todo');
MainSelectorUI.attachTo('#main');
StatsUI.attachTo('#footer');
ToggleAllUI.attachTo('#toggle-all');
TodoListUI.attachTo('#todo-list');
};
function (
TodosData,
StatsData,
NewItemUI,
TodoListUI,
StatsUI,
MainSelectorUI,
ToggleAllUI) {
var initialize = function () {
StatsData.attachTo(document);
TodosData.attachTo(document);
NewItemUI.attachTo('#new-todo');
MainSelectorUI.attachTo('#main');
StatsUI.attachTo('#footer');
ToggleAllUI.attachTo('#toggle-all');
TodoListUI.attachTo('#todo-list');
};
return {
initialize: initialize
};
}
);
return {
initialize: initialize
};
});
dependency-examples/flight/app/js/data/stats.js
View file @ d82fcf5a
/*global define */
'use strict';
define(
[
'flight/component',
'../store'
],
define([
'flight/component',
'../store'
], function (defineComponent, dataStore) {
function stats() {
this.recount = function () {
var todos = dataStore.all();
var all = todos.length;
var remaining = todos.reduce(function (memo, each) {
return memo += each.completed ? 0 : 1;
}, 0);
function (defineComponent, dataStore) {
return defineComponent(stats);
this.trigger('dataStatsCounted', {
all: all,
remaining: remaining,
completed: all - remaining,
filter: localStorage.getItem('filter') || ''
});
};
function stats() {
this.recount = function () {
var todos = dataStore.all();
var all = todos.length;
var remaining = todos.reduce(function (memo, each) {
return memo += each.completed ? 0 : 1;
}, 0);
this.after('initialize', function () {
this.on(document, 'dataTodosLoaded', this.recount);
this.on(document, 'dataTodoAdded', this.recount);
this.on(document, 'dataTodoRemoved', this.recount);
this.on(document, 'dataTodoToggled', this.recount);
this.on(document, 'dataClearedCompleted', this.recount);
this.on(document, 'dataTodoToggledAll', this.recount);
});
}
this.trigger('dataStatsCounted', {
all: all,
remaining: remaining,
completed: all - remaining,
filter: localStorage.getItem('filter') || ''
});
};
this.after('initialize', function () {
this.on(document, 'dataTodosLoaded', this.recount);
this.on(document, 'dataTodoAdded', this.recount);
this.on(document, 'dataTodoRemoved', this.recount);
this.on(document, 'dataTodoToggled', this.recount);
this.on(document, 'dataClearedCompleted', this.recount);
this.on(document, 'dataTodoToggledAll', this.recount);
});
}
}
);
return defineComponent(stats);
});
dependency-examples/flight/app/js/data/todos.js
View file @ d82fcf5a
/*global define */
'use strict';
define(
[
'flight/component',
'../store'
],
function (defineComponent, dataStore) {
return defineComponent(todos);
function todos() {
var filter;
this.add = function (e, data) {
var todo = dataStore.save({
title: data.title,
completed: false
});
this.trigger('dataTodoAdded', { todo: todo, filter: filter });
};
this.remove = function (e, data) {
var todo = dataStore.destroy(data.id);
this.trigger('dataTodoRemoved', todo);
};
define([
'flight/component',
'../store'
], function (defineComponent, dataStore) {
function todos() {
var filter;
this.add = function (e, data) {
var todo = dataStore.save({
title: data.title,
completed: false
});
this.load = function (e, data) {
var todos;
this.trigger('dataTodoAdded', { todo: todo, filter: filter });
};
filter = localStorage.getItem('filter');
todos = this.find();
this.trigger('dataTodosLoaded', { todos: todos });
};
this.remove = function (e, data) {
var todo = dataStore.destroy(data.id);
this.update = function (e, data) {
dataStore.save(data);
};
this.trigger('dataTodoRemoved', todo);
};
this.toggleCompleted = function (e, data) {
var eventType;
var todo = dataStore.get(data.id);
this.load = function () {
var todos;
todo.completed = !todo.completed;
dataStore.save(todo);
filter = localStorage.getItem('filter');
todos = this.find();
this.trigger('dataTodosLoaded', { todos: todos });
};
eventType = filter ? 'dataTodoRemoved' : 'dataTodoToggled';
this.update = function (e, data) {
dataStore.save(data);
};
this.trigger(eventType, todo);
};
this.toggleCompleted = function (e, data) {
var eventType;
var todo = dataStore.get(data.id);
this.toggleAllCompleted = function (e, data) {
dataStore.updateAll({ completed: data.completed });
this.trigger('dataTodoToggledAll', { todos: this.find(filter) });
};
todo.completed = !todo.completed;
dataStore.save(todo);
this.filter = function (e, data) {
var todos;
eventType = filter ? 'dataTodoRemoved' : 'dataTodoToggled';
localStorage.setItem('filter', data.filter);
filter = data.filter;
todos = this.find();
this.trigger(eventType, todo);
};
this.trigger('dataTodosFiltered', { todos: todos });
};
this.toggleAllCompleted = function (e, data) {
dataStore.updateAll({ completed: data.completed });
this.trigger('dataTodoToggledAll', { todos: this.find(filter) });
};
this.find = function () {
var todos;
this.filter = function (e, data) {
var todos;
if (filter) {
todos = dataStore.find(function (each) {
return (typeof each[filter] !== 'undefined') ? each.completed : !each.completed;
});
}
else {
todos = dataStore.all();
}
localStorage.setItem('filter', data.filter);
filter = data.filter;
todos = this.find();
return todos;
};
this.trigger('dataTodosFiltered', { todos: todos });
};
this.clearCompleted = function () {
var todos;
this.find = function () {
var todos;
dataStore.destroyAll({ completed: true });
if (filter) {
todos = dataStore.find(function (each) {
return (typeof each[filter] !== 'undefined') ? each.completed : !each.completed;
});
} else {
todos = dataStore.all();
this.trigger('dataClearedCompleted', { todos: todos });
};
this.after('initialize', function () {
this.on(document, 'uiAddRequested', this.add);
this.on(document, 'uiUpdateRequested', this.update);
this.on(document, 'uiRemoveRequested', this.remove);
this.on(document, 'uiLoadRequested', this.load);
this.on(document, 'uiToggleRequested', this.toggleCompleted);
this.on(document, 'uiToggleAllRequested', this.toggleAllCompleted);
this.on(document, 'uiClearRequested', this.clearCompleted);
this.on(document, 'uiFilterRequested', this.filter);
});
}
}
return todos;
};
this.clearCompleted = function () {
dataStore.destroyAll({ completed: true });
this.trigger('uiFilterRequested', { filter: filter });
this.trigger('dataClearedCompleted');
};
this.after('initialize', function () {
this.on(document, 'uiAddRequested', this.add);
this.on(document, 'uiUpdateRequested', this.update);
this.on(document, 'uiRemoveRequested', this.remove);
this.on(document, 'uiLoadRequested', this.load);
this.on(document, 'uiToggleRequested', this.toggleCompleted);
this.on(document, 'uiToggleAllRequested', this.toggleAllCompleted);
this.on(document, 'uiClearRequested', this.clearCompleted);
this.on(document, 'uiFilterRequested', this.filter);
});
}
);
return defineComponent(todos);
});
dependency-examples/flight/app/js/store.js
View file @ d82fcf5a
'use strict';
/*global define */
define(
[
'depot'
],
'use strict';
function (depot) {
return depot('todos', { idAttribute: 'id' });
}
);
define([
'depot'
], function (depot) {
return depot('todos', { idAttribute: 'id' });
});
dependency-examples/flight/app/js/ui/main_selector.js
View file @ d82fcf5a
/*global define */
'use strict';
define(
[
'flight/component'
],
define([
'flight/component'
], function (defineComponent) {
function mainSelector() {
this.toggle = function (e, data) {
var toggle = data.all > 0;
this.$node.toggle(toggle);
};
function (defineComponent) {
return defineComponent(mainSelector);
function mainSelector() {
this.toggle = function (e, data) {
var toggle = data.all > 0;
this.$node.toggle(toggle);
};
this.after('initialize', function () {
this.$node.hide();
this.on(document, 'dataStatsCounted', this.toggle);
});
}
this.after('initialize', function () {
this.$node.hide();
this.on(document, 'dataStatsCounted', this.toggle);
});
}
);
return defineComponent(mainSelector);
});
dependency-examples/flight/app/js/ui/new_item.js
View file @ d82fcf5a
/*global define */
'use strict';
define(
[
'flight/component'
],
define([
'flight/component'
], function (defineComponent) {
function newItem() {
var ENTER_KEY = 13;
function (defineComponent) {
return defineComponent(newItem);
this.createOnEnter = function (e) {
if (e.which !== ENTER_KEY ||
!this.$node.val().trim()) {
return;
}
function newItem() {
var ENTER_KEY = 13;
this.createOnEnter = function (e) {
if (e.which !== ENTER_KEY ||
!this.$node.val().trim()) {
return;
}
this.trigger('uiAddRequested', {
title: this.$node.val().trim()
});
this.trigger('uiAddRequested', {
title: this.$node.val().trim()
});
this.$node.val('');
};
this.$node.val('');
};
this.after('initialize', function () {
this.on('keydown', this.createOnEnter);
});
}
this.after('initialize', function () {
this.on('keydown', this.createOnEnter);
});
}
);
return defineComponent(newItem);
});
dependency-examples/flight/app/js/ui/stats.js
View file @ d82fcf5a
/*global define */
'use strict';
define(
[
'flight/component',
'./with_filters',
'text!app/templates/stats.html',
'../utils'
],
function (defineComponent, withFilters, statsTmpl, utils) {
return defineComponent(stats, withFilters);
function stats() {
var template = utils.tmpl(statsTmpl);
this.defaultAttrs({
clearCompletedSelector: '#clear-completed'
});
this.render = function (e, data) {
var toggle = data.all > 0;
this.$node.html(template(data));
this.$node.toggle(toggle);
this.markSelected(data.filter);
};
this.clearCompleted = function (e, data) {
this.trigger('uiClearRequested');
};
this.after('initialize', function () {
this.$node.hide();
this.on(document, 'dataStatsCounted', this.render);
this.on('click', { 'clearCompletedSelector': this.clearCompleted });
});
}
define([
'flight/component',
'./with_filters',
'text!app/templates/stats.html',
'../utils'
], function (defineComponent, withFilters, statsTmpl, utils) {
function stats() {
var template = utils.tmpl(statsTmpl);
this.defaultAttrs({
clearCompletedSelector: '#clear-completed'
});
this.render = function (e, data) {
var toggle = data.all > 0;
this.$node.html(template(data));
this.$node.toggle(toggle);
this.markSelected(data.filter);
};
this.clearCompleted = function () {
this.trigger('uiClearRequested');
};
this.after('initialize', function () {
this.$node.hide();
this.on(document, 'dataStatsCounted', this.render);
this.on('click', { 'clearCompletedSelector': this.clearCompleted });
});
}
);
return defineComponent(stats, withFilters);
});
dependency-examples/flight/app/js/ui/todo_list.js
View file @ d82fcf5a
/*global define $ */
/*global define, $ */
'use strict';
define(
[
'flight/component',
'text!app/templates/todo.html',
'../utils'
],
function (defineComponent, todoTmpl, utils) {
return defineComponent(todoList);
function todoList() {
var ENTER_KEY = 13;
var template = utils.tmpl(todoTmpl);
this.defaultAttrs({
destroySelector: 'button.destroy',
toggleSelector: 'input.toggle',
labelSelector: 'label',
editSelector: '.edit'
});
this.renderAll = function (e, data) {
this.$node.html('');
data.todos.forEach(function (each) {
this.render(e, { todo: each });
}, this);
};
this.render = function (e, data) {
if (e.type === 'dataTodoAdded' && data.filter === 'completed') {
return;
}
this.$node.append(template(data.todo));
};
this.edit = function (e, data) {
var $todoEl = $(data.el).parents('li');
$todoEl.addClass('editing');
this.select('editSelector').focus();
};
this.requestUpdate = function (e, data) {
var $inputEl = $(e.currentTarget);
var $todoEl = $inputEl.parents('li');
var value = $inputEl.val().trim();
var id = $todoEl.attr('id');
if (!$todoEl.hasClass('editing')) {
return;
}
!$todoEl.removeClass('editing');
if (value) {
$todoEl.find('label').html(value);
this.trigger('uiUpdateRequested', { id: id, title: value });
} else {
this.trigger('uiRemoveRequested', { id: id });
}
};
this.requestUpdateOnEnter = function (e, data) {
if (e.which === ENTER_KEY) {
this.requestUpdate(e, data);
}
};
this.requestRemove = function (e, data) {
var id = $(data.el).attr('id').split('_')[1];
define([
'flight/component',
'text!app/templates/todo.html',
'../utils'
], function (defineComponent, todoTmpl, utils) {
function todoList() {
var ENTER_KEY = 13;
var template = utils.tmpl(todoTmpl);
this.defaultAttrs({
destroySelector: 'button.destroy',
toggleSelector: 'input.toggle',
labelSelector: 'label',
editSelector: '.edit'
});
this.renderAll = function (e, data) {
this.$node.html('');
data.todos.forEach(function (each) {
this.render(e, { todo: each });
}, this);
};
this.render = function (e, data) {
if (e.type === 'dataTodoAdded' && data.filter === 'completed') {
return;
}
this.$node.append(template(data.todo));
};
this.edit = function (e, data) {
var $todoEl = $(data.el).parents('li');
$todoEl.addClass('editing');
this.select('editSelector').focus();
};
this.requestUpdate = function (e) {
var $inputEl = $(e.currentTarget);
var $todoEl = $inputEl.parents('li');
var value = $inputEl.val().trim();
var id = $todoEl.attr('id');
if (!$todoEl.hasClass('editing')) {
return;
}
$todoEl.removeClass('editing');
if (value) {
$todoEl.find('label').html(value);
this.trigger('uiUpdateRequested', { id: id, title: value });
} else {
this.trigger('uiRemoveRequested', { id: id });
};
this.remove = function (e, data) {
var $todoEl = this.$node.find('#' + data.id);
$todoEl.remove();
};
this.toggle = function (e, data) {
var $todoEl = $(data.el).parents('li');
$todoEl.toggleClass('completed');
this.trigger('uiToggleRequested', { id: $todoEl.attr('id') });
};
this.after('initialize', function () {
this.on(document, 'dataTodoAdded', this.render);
this.on(document, 'dataTodosLoaded', this.renderAll);
this.on(document, 'dataTodosFiltered', this.renderAll);
this.on(document, 'dataClearedCompleted', this.renderAll);
this.on(document, 'dataTodoToggledAll', this.renderAll);
this.on(document, 'dataTodoRemoved', this.remove);
this.on('click', { 'destroySelector': this.requestRemove });
this.on('click', { 'toggleSelector': this.toggle });
this.on('dblclick', { 'labelSelector': this.edit });
this.$node.on('blur', '.edit', this.bind(this.requestUpdate));
this.$node.on('keydown', '.edit', this.bind(this.requestUpdateOnEnter));
// these don't work
// this.on(this.attr.editSelector, 'blur', this.requestUpdate);
// this.on('blur', { 'editSelector': this.requestUpdate });
this.trigger('uiLoadRequested');
});
}
}
};
this.requestUpdateOnEnter = function (e, data) {
if (e.which === ENTER_KEY) {
this.requestUpdate(e, data);
}
};
this.requestRemove = function (e, data) {
var id = $(data.el).attr('id').split('_')[1];
this.trigger('uiRemoveRequested', { id: id });
};
this.remove = function (e, data) {
var $todoEl = this.$node.find('#' + data.id);
$todoEl.remove();
};
this.toggle = function (e, data) {
var $todoEl = $(data.el).parents('li');
$todoEl.toggleClass('completed');
this.trigger('uiToggleRequested', { id: $todoEl.attr('id') });
};
this.after('initialize', function () {
this.on(document, 'dataTodoAdded', this.render);
this.on(document, 'dataTodosLoaded', this.renderAll);
this.on(document, 'dataTodosFiltered', this.renderAll);
this.on(document, 'dataTodoToggledAll', this.renderAll);
this.on(document, 'dataTodoRemoved', this.remove);
this.on('click', { 'destroySelector': this.requestRemove });
this.on('click', { 'toggleSelector': this.toggle });
this.on('dblclick', { 'labelSelector': this.edit });
this.$node.on('blur', '.edit', this.bind(this.requestUpdate));
this.$node.on('keydown', '.edit', this.bind(this.requestUpdateOnEnter));
// these don't work
// this.on(this.attr.editSelector, 'blur', this.requestUpdate);
// this.on('blur', { 'editSelector': this.requestUpdate });
this.trigger('uiLoadRequested');
});
}
);
return defineComponent(todoList);
});
dependency-examples/flight/app/js/ui/toggle_all.js
View file @ d82fcf5a
/*global define */
'use strict';
define(
[
'flight/component'
],
function (defineComponent) {
return defineComponent(toggleAll);
function toggleAll() {
this.toggleAllComplete = function () {
this.trigger('uiToggleAllRequested', {
completed: this.$node.is(':checked')
});
};
define([
'flight/component'
], function (defineComponent) {
function toggleAll() {
this.toggleAllComplete = function () {
this.trigger('uiToggleAllRequested', {
completed: this.$node.is(':checked')
});
};
this.toggleCheckbox = function (e, data) {
this.$node[0].checked = !data.remaining;
};
this.toggleCheckbox = function (e, data) {
this.$node[0].checked = !data.remaining;
};
this.after('initialize', function () {
this.on('click', this.toggleAllComplete);
this.on(document, 'dataStatsCounted', this.toggleCheckbox);
});
}
this.after('initialize', function () {
this.on('click', this.toggleAllComplete);
this.on(document, 'dataStatsCounted', this.toggleCheckbox);
});
}
);
return defineComponent(toggleAll);
});
dependency-examples/flight/app/js/ui/with_filters.js
View file @ d82fcf5a
/*global define $ */
/*global define, $ */
'use strict';
define(
function () {
return function withFilters() {
this.defaultAttrs({
filterSelector: '#filters a'
});
define(function () {
return function withFilters() {
this.defaultAttrs({
filterSelector: '#filters a'
});
this.chooseFilter = function (e, data) {
var filter = data.el.hash.slice(2);
this.chooseFilter = function (e, data) {
var filter = data.el.hash.slice(2);
this.select('filterSelector').removeClass('selected');
$(data.el).addClass('selected');
this.trigger('uiFilterRequested', { filter: filter });
};
this.markSelected = function (filter) {
this.$node.find('[href="#/' + filter + '"]').addClass('selected');
};
this.select('filterSelector').removeClass('selected');
$(data.el).addClass('selected');
this.trigger('uiFilterRequested', { filter: filter });
};
this.after('initialize', function () {
this.on('click', { filterSelector: this.chooseFilter });
});
this.markSelected = function (filter) {
this.$node.find('[href="#/' + filter + '"]').addClass('selected');
};
}
);
this.after('initialize', function () {
this.on('click', { filterSelector: this.chooseFilter });
});
};
});
dependency-examples/flight/app/js/utils.js
View file @ d82fcf5a
......@@ -4,7 +4,6 @@
// tmpl function scooped from underscore.
// http://documentcloud.github.com/underscore/#template
define(function () {
var _ = {};
// List of HTML entities for escaping.
......@@ -128,5 +127,7 @@ define(function () {
return template;
};
return { tmpl: template };
return {
tmpl: template
};
});
dependency-examples/flight/app/templates/stats.html
View file @ d82fcf5a
<span id="todo-count"><strong><%= remaining %></strong> <%= remaining == 1 ? 'item' : 'items' %> left</span>
<span id="todo-count">
<strong><%= remaining %></strong> <%= remaining == 1 ? 'item' : 'items' %> left
</span>
<ul id="filters">
<li>
<a href="#/">All</a>
......@@ -11,5 +13,5 @@
</li>
</ul>
<% if (completed) { %>
<button id="clear-completed">Clear completed (<%= completed %>)</button>
<button id="clear-completed">Clear completed (<%= completed %>)</button>
<% } %>
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7