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

72
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>
<title>Todo app</title>
<script src="mithril.min.js"></script>
<body>
<script>
//app goes here
</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
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 `<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 button calls the `todo.vm.add` method when clicked.
- The table lists all the existing to-dos, if any.
@ -411,11 +411,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).
@ -428,6 +428,7 @@ Here's the application code in its entirety:
```markup
<!doctype html>
<script src="mithril.min.js"></script>
<body>
<script>
//this application only has one component: todo
var todo = {};
@ -475,27 +476,26 @@ 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});
</script>
</body>
```
This example is also available as a [jsFiddle](http://jsfiddle.net/fbgypzbr/16/).