From 9ec3383c296bfdc83321e7d70979cb357436b965 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Wed, 20 Apr 2016 23:45:50 -0700 Subject: [PATCH 1/2] Mount to document.body As brought up in #1019, mounting to the `document` can be problematic. Better to show mounting to `document.body` where things are a bit more straightforward. --- docs/getting-started.md | 66 +++++++++++++++++++---------------------- 1 file changed, 31 insertions(+), 35 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index 7ee6f431..ca8c8444 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -377,28 +377,26 @@ The rest of the code can be implemented using idioms we already covered. The com ```javascript todo.view = function() { - return m("html", [ - m("body", [ - m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}), - m("button", {onclick: todo.vm.add}, "Add"), - m("table", [ - todo.vm.list.map(function(task, index) { - return m("tr", [ - m("td", [ - m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()}) - ]), - m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()), - ]) - }) - ]) + return [ + m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}), + m("button", {onclick: todo.vm.add}, "Add"), + m("table", [ + todo.vm.list.map(function(task, index) { + return m("tr", [ + m("td", [ + m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()}) + ]), + m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()), + ]) + }) ]) - ]); + ]; }; ``` Here are the highlights of the template above: -- The template is rendered as a child of the implicit `` element of the document. +- The template is rendered as a child of the document's ``. - The text input saves its value to the `todo.vm.description` getter-setter we defined earlier. - The button calls the `todo.vm.add` method when clicked. - The table lists all the existing to-dos, if any. @@ -411,11 +409,11 @@ Here are the highlights of the template above: So far, we've been using `m.render` to manually redraw after we made a change to the data. However, as I mentioned before, you can enable an [auto-redrawing system](auto-redrawing.md), by initializing the `todo` component via `m.mount`. ```javascript -//render the todo component inside the document DOM node -m.mount(document, {controller: todo.controller, view: todo.view}); +//render the todo component inside the body DOM node +m.mount(document.body, {controller: todo.controller, view: todo.view}); ``` -Mithril's auto-redrawing system keeps track of controller stability, and only redraws the view once it detects that the controller has finished running all of its code, including asynchronous AJAX payloads. Likewise, it intelligently waits for asynchronous services inside event handlers to complete before redrawing. +Mithril's auto-redrawing system keeps track of controller stability, and only redraws the view once it detects that the controller has finished running all of its code, including asynchronous AJAX payloads. Likewise, it intelligently waits for asynchronous services inside event handlers to complete before redrawing. You can learn more about how redrawing heuristics work [here](auto-redrawing.md). @@ -475,26 +473,24 @@ todo.controller = function() { //here's the view todo.view = function() { - return m("html", [ - m("body", [ - m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}), - m("button", {onclick: todo.vm.add}, "Add"), - m("table", [ - todo.vm.list.map(function(task, index) { - return m("tr", [ - m("td", [ - m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()}) - ]), - m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()), - ]) - }) - ]) + return [ + m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}), + m("button", {onclick: todo.vm.add}, "Add"), + m("table", [ + todo.vm.list.map(function(task, index) { + return m("tr", [ + m("td", [ + m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()}) + ]), + m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()), + ]) + }) ]) - ]); + ] }; //initialize the application -m.mount(document, {controller: todo.controller, view: todo.view}); +m.mount(document.body, {controller: todo.controller, view: todo.view}); ``` From 577808c6df6cf68f917712d57bddfec4ef116b84 Mon Sep 17 00:00:00 2001 From: Demian Ferreiro Date: Thu, 21 Apr 2016 12:36:45 -0300 Subject: [PATCH 2/2] Add tag to Getting Started guide This makes the code on the Summary section a working single-file application. Without the tag the code failed with "Error: Please ensure the DOM element exists before rendering a template into it" because the + + ``` -Yes, this is valid HTML 5! According to the specs, the ``, `` and `` tags can be omitted, but their respective DOM elements will still be there implicitly when a browser renders that markup. +Yes, this is valid HTML 5! According to the specs, the `` and `` tags can be omitted, but their respective DOM elements will still be there implicitly when a browser renders that markup. --- @@ -426,6 +428,7 @@ Here's the application code in its entirety: ```markup + + ``` This example is also available as a [jsFiddle](http://jsfiddle.net/fbgypzbr/16/).