137 lines
3.2 KiB
Markdown
137 lines
3.2 KiB
Markdown
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)
|
|
- [Component `controller` function](#component-controller-function)
|
|
- [Passing components to `m()`](#passing-components-to-m)
|
|
|
|
## `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) { ... }
|
|
});
|
|
```
|
|
|
|
If available the DOM-Element of the vnode can be accessed at `vnode.dom`.
|
|
|
|
## 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;
|
|
}
|
|
})
|
|
```
|
|
|
|
## Component `controller` function
|
|
|
|
In `v1.x` there is no more `controller` property in components, use `oninit` instead.
|
|
|
|
### `v0.2.x`
|
|
|
|
```js
|
|
m.mount(document.body, {
|
|
controller : function() {
|
|
var ctrl = this;
|
|
|
|
ctrl.fooga = 1;
|
|
},
|
|
|
|
view : function(ctrl) {
|
|
return m("p", ctrl.fooga);
|
|
}
|
|
});
|
|
```
|
|
|
|
### `v1.x`
|
|
|
|
```js
|
|
m.mount(document.body, {
|
|
oninit : function(vnode) {
|
|
vnode.state.fooga = 1;
|
|
},
|
|
|
|
view : function(vnode) {
|
|
return m("p", vnode.state.fooga);
|
|
}
|
|
});
|
|
|
|
// OR
|
|
|
|
m.mount(document.body, {
|
|
oninit : function(vnode) {
|
|
var ctrl = this; // this is bound to vnode.state by default
|
|
|
|
ctrl.fooga = 1;
|
|
},
|
|
|
|
view : function(vnode) {
|
|
var ctrl = this; // this is bound to vnode.state by default
|
|
|
|
return m("p", ctrl.fooga);
|
|
}
|
|
});
|
|
```
|
|
|
|
## Passing components to `m()`
|
|
|
|
In `v0.2.x` you could pass components as the second argument of `m()` w/o any wrapping required. To help with consistency in `v1.x` they must always be wrapped with a `m()` invocation.
|
|
|
|
### `v0.2.x`
|
|
|
|
```js
|
|
m("div", <component>);
|
|
```
|
|
|
|
### `v1.x`
|
|
|
|
```js
|
|
m("div", m(<component>));
|
|
```
|