vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin' into next

Browse source
This commit is contained in:
Leo Horie 2016-04-21 19:31:40 -04:00
commit f7ceac193b
1 changed files with 36 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

70
docs/getting-started.md
View file

@ -22,12 +22,14 @@ Once you have a [copy of Mithril](installation.md), getting started is surprisin
<!doctype html> <!doctype html>
<title>Todo app</title> <title>Todo app</title>
<script src="mithril.min.js"></script> <script src="mithril.min.js"></script>
<body>
<script> <script>
//app goes here //app goes here
</script> </script>
</body>
``` ```
Yes, this is valid HTML 5! According to the specs, the `<html>`, `<head>` and `<body>` 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 `<html>` and `<head>` tags can be omitted, but their respective DOM elements will still be there implicitly when a browser renders that markup.
--- ---
@ -377,28 +379,26 @@ The rest of the code can be implemented using idioms we already covered. The com
```javascript ```javascript
todo.view = function() { todo.view = function() {
return m("html", [ return [
m("body", [ m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}),
m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}), m("button", {onclick: todo.vm.add}, "Add"),
m("button", {onclick: todo.vm.add}, "Add"), m("table", [
m("table", [ todo.vm.list.map(function(task, index) {
todo.vm.list.map(function(task, index) { return m("tr", [
return m("tr", [ m("td", [
m("td", [ m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()})
m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()}) ]),
]), m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()),
m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()), ])
]) })
})
])
]) ])
]); ];
}; };
``` ```
Here are the highlights of the template above: Here are the highlights of the template above:
- The template is rendered as a child of the implicit `<html>` element of the document. - The template is rendered as a child of the document's `<body>`.
- The text input saves its value to the `todo.vm.description` getter-setter we defined earlier. - 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 button calls the `todo.vm.add` method when clicked.
- The table lists all the existing to-dos, if any. - The table lists all the existing to-dos, if any.
@ -411,8 +411,8 @@ 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`. 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 ```javascript
//render the todo component inside the document DOM node //render the todo component inside the body DOM node
m.mount(document, {controller: todo.controller, view: todo.view}); 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.
@ -428,6 +428,7 @@ Here's the application code in its entirety:
```markup ```markup
<!doctype html> <!doctype html>
<script src="mithril.min.js"></script> <script src="mithril.min.js"></script>
<body>
<script> <script>
//this application only has one component: todo //this application only has one component: todo
var todo = {}; var todo = {};
@ -475,27 +476,26 @@ todo.controller = function() {
//here's the view //here's the view
todo.view = function() { todo.view = function() {
return m("html", [ return [
m("body", [ m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}),
m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}), m("button", {onclick: todo.vm.add}, "Add"),
m("button", {onclick: todo.vm.add}, "Add"), m("table", [
m("table", [ todo.vm.list.map(function(task, index) {
todo.vm.list.map(function(task, index) { return m("tr", [
return m("tr", [ m("td", [
m("td", [ m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()})
m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()}) ]),
]), m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()),
m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()), ])
]) })
})
])
]) ])
]); ]
}; };
//initialize the application //initialize the application
m.mount(document, {controller: todo.controller, view: todo.view}); m.mount(document.body, {controller: todo.controller, view: todo.view});
</script> </script>
</body>
``` ```
This example is also available as a [jsFiddle](http://jsfiddle.net/fbgypzbr/16/). This example is also available as a [jsFiddle](http://jsfiddle.net/fbgypzbr/16/).