From 647877958cf27166edb925b05135ac80f45743ee Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Mon, 14 Nov 2016 10:08:23 -0800 Subject: [PATCH 1/3] .items -> .list --- docs/request.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/request.md b/docs/request.md index 4653e9c0..aa248ed0 100644 --- a/docs/request.md +++ b/docs/request.md @@ -74,7 +74,7 @@ var Data = { url: "/api/todos", }) .then(function(items) { - Data.todos.items = items + Data.todos.list = items }) } } @@ -96,7 +96,7 @@ m.route(document.body, "/", { Let's assume making a request to the server URL `/api/items` returns an array of objects in JSON format. -When `m.route` is called at the bottom, the `Todos` component is initialized. `oninit` is called, which calls `m.request`. This retrieves an array of objects from the server asynchronously. "Asynchronously" means that Javascript continues running other code while it waits for the response from server. In this case, it means `fetch` returns, and the component is rendered using the original empty array as `Data.todos.list`. Once the request to the server completes, the array of objects `items` is assigned to `Data.todos.items` and the component is rendered again, yielding a list of `
`s containing the titles of each todo. +When `m.route` is called at the bottom, the `Todos` component is initialized. `oninit` is called, which calls `m.request`. This retrieves an array of objects from the server asynchronously. "Asynchronously" means that Javascript continues running other code while it waits for the response from server. In this case, it means `fetch` returns, and the component is rendered using the original empty array as `Data.todos.list`. Once the request to the server completes, the array of objects `items` is assigned to `Data.todos.list` and the component is rendered again, yielding a list of `
`s containing the titles of each todo. --- From 8388cedad811f50138a2cbe98baff12ebcdb00f8 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Mon, 14 Nov 2016 10:09:23 -0800 Subject: [PATCH 2/3] .items -> .list --- docs/request.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/request.md b/docs/request.md index aa248ed0..40f42c49 100644 --- a/docs/request.md +++ b/docs/request.md @@ -115,7 +115,7 @@ var Data = { url: "/api/todos", }) .then(function(items) { - Data.todos.items = items + Data.todos.list = items }) .catch(function(e) { Data.todos.error = e.message From 7c5e06d2ec280ab50482beb8dfc8dbbeefa92a1a Mon Sep 17 00:00:00 2001 From: "Paul D. Fernhout" Date: Mon, 14 Nov 2016 21:12:34 -0500 Subject: [PATCH 3/3] Fix todomvc to reflect All/Active/Completed choice --- examples/todomvc/todomvc.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/todomvc/todomvc.js b/examples/todomvc/todomvc.js index 463b7f34..1f1f257a 100644 --- a/examples/todomvc/todomvc.js +++ b/examples/todomvc/todomvc.js @@ -6,13 +6,13 @@ var state = { localStorage["todos-mithril"] = JSON.stringify(state.todos) }) }, - + todos: JSON.parse(localStorage["todos-mithril"] || "[]"), editing: null, filter: "", remaining: 0, todosByStatus: [], - + createTodo: function(title) { 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("label[for='toggle-all']", {onclick: ui.toggleAll}, "Mark all as complete"), 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" : "")}, [ m(".view", [ 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", ]), m("ul#filters", [ - m("li", m("a[href='/']", {oncreate: m.route.link, class: state.filter === "" ? "selected" : ""}, "All")), - m("li", m("a[href='/active']", {oncreate: m.route.link, class: state.filter === "active" ? "selected" : ""}, "Active")), - m("li", m("a[href='/completed']", {oncreate: m.route.link, class: state.filter === "completed" ? "selected" : ""}, "Completed")), + 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.showing === "active" ? "selected" : ""}, "Active")), + 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"), ]) : null,