Fix todomvc to reflect All/Active/Completed choice

This commit is contained in:
Paul D. Fernhout 2016-11-14 21:12:34 -05:00
parent 8388cedad8
commit 7c5e06d2ec

View file

@ -6,13 +6,13 @@ var state = {
localStorage["todos-mithril"] = JSON.stringify(state.todos) localStorage["todos-mithril"] = JSON.stringify(state.todos)
}) })
}, },
todos: JSON.parse(localStorage["todos-mithril"] || "[]"), todos: JSON.parse(localStorage["todos-mithril"] || "[]"),
editing: null, editing: null,
filter: "", filter: "",
remaining: 0, remaining: 0,
todosByStatus: [], todosByStatus: [],
createTodo: function(title) { createTodo: function(title) {
state.todos.push({title: title.trim(), completed: false}) state.todos.push({title: title.trim(), completed: false})
}, },
@ -97,7 +97,7 @@ var Todos = {
m("input#toggle-all[type='checkbox']", {checked: state.remaining === 0, onclick: ui.toggleAll}), m("input#toggle-all[type='checkbox']", {checked: state.remaining === 0, onclick: ui.toggleAll}),
m("label[for='toggle-all']", {onclick: ui.toggleAll}, "Mark all as complete"), m("label[for='toggle-all']", {onclick: ui.toggleAll}, "Mark all as complete"),
m("ul#todo-list", [ m("ul#todo-list", [
state.todos.map(function(todo) { state.todosByStatus.map(function(todo) {
return m("li", {class: (todo.completed ? "completed" : "") + " " + (todo === state.editing ? "editing" : "")}, [ return m("li", {class: (todo.completed ? "completed" : "") + " " + (todo === state.editing ? "editing" : "")}, [
m(".view", [ m(".view", [
m("input.toggle[type='checkbox']", {checked: todo.completed, onclick: function() {ui.toggle(todo)}}), m("input.toggle[type='checkbox']", {checked: todo.completed, onclick: function() {ui.toggle(todo)}}),
@ -115,9 +115,9 @@ var Todos = {
state.remaining === 1 ? " item left" : " items left", state.remaining === 1 ? " item left" : " items left",
]), ]),
m("ul#filters", [ m("ul#filters", [
m("li", m("a[href='/']", {oncreate: m.route.link, class: state.filter === "" ? "selected" : ""}, "All")), m("li", m("a[href='/']", {oncreate: m.route.link, class: state.showing === "" ? "selected" : ""}, "All")),
m("li", m("a[href='/active']", {oncreate: m.route.link, class: state.filter === "active" ? "selected" : ""}, "Active")), m("li", m("a[href='/active']", {oncreate: m.route.link, class: state.showing === "active" ? "selected" : ""}, "Active")),
m("li", m("a[href='/completed']", {oncreate: m.route.link, class: state.filter === "completed" ? "selected" : ""}, "Completed")), m("li", m("a[href='/completed']", {oncreate: m.route.link, class: state.showing === "completed" ? "selected" : ""}, "Completed")),
]), ]),
m("button#clear-completed", {onclick: function() {state.dispatch("clear")}}, "Clear completed"), m("button#clear-completed", {onclick: function() {state.dispatch("clear")}}, "Clear completed"),
]) : null, ]) : null,