Starting on a migration guide
I'm sure there's other pieces I'm forgetting
This commit is contained in:
parent
e35fc79f09
commit
fa34941cee
1 changed files with 67 additions and 0 deletions
67
docs/v1.x-migration.md
Normal file
67
docs/v1.x-migration.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
Migrating from `v0.2.x` to `v1.x`
|
||||
=================================
|
||||
|
||||
`v1.x` is largely API-compatible with `v0.2.x`, but there are a few breaking changes.
|
||||
|
||||
- [`config` function](#config-function)
|
||||
- [Cancelling redraw from event handlers](#cancelling-redraw-from-event-handlers)
|
||||
|
||||
## `config` function
|
||||
|
||||
In `v0.2.x` mithril provided a single lifecycle method, `config`. `v1.x` provides much more fine-grained control over the lifecycle of a vnode.
|
||||
|
||||
### `v0.2.x`
|
||||
|
||||
```js
|
||||
m("div", {
|
||||
config : function(element, isInitialized) {
|
||||
// runs on each redraw
|
||||
// isInitialized is a boolean representing if the node has been added to the DOM
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### `v1.x`
|
||||
|
||||
More documentation on these new methods is available in [lifecycle-methods.md](lifecycle-methods.md).
|
||||
|
||||
```js
|
||||
m("div", {
|
||||
// Called before the DOM node is created
|
||||
oninit : function(vnode) { ... },
|
||||
// Called after the DOM node is created
|
||||
oncreate : function(vnode) { ... },
|
||||
// Called before the node is updated, return false to cancel
|
||||
onbeforeupdate : function(vnode, old) { ... },
|
||||
// Called after the node is updated
|
||||
onupdate : function(vnode) { ... },
|
||||
// Called before the node is removed, call done() when ready for the node to be removed from the DOM
|
||||
onbeforeremove : function(vnode, done) { ... },
|
||||
// Called before the node is removed, but after onbeforeremove calls done()
|
||||
onremove : function(vnode) { ... }
|
||||
});
|
||||
```
|
||||
|
||||
## Cancelling redraw from event handlers
|
||||
|
||||
`m.mount()` and `m.route()` still automatically redraw after a DOM event handler runs. Cancelling these redraws from within your event handlers is now done by setting the `redraw` property on the passed-in event object to `false`.
|
||||
|
||||
### `v0.2.x`
|
||||
|
||||
```js
|
||||
m("div", {
|
||||
onclick : function(e) {
|
||||
m.redraw.strategy("none");
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### `v1.x`
|
||||
|
||||
```js
|
||||
m("div", {
|
||||
onclick : function(e) {
|
||||
e.redraw = false;
|
||||
}
|
||||
})
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue