diff --git a/docs/v1.x-migration.md b/docs/v1.x-migration.md index 1e80cbe8..54a047c5 100644 --- a/docs/v1.x-migration.md +++ b/docs/v1.x-migration.md @@ -5,6 +5,8 @@ Migrating from `v0.2.x` to `v1.x` - [`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 @@ -67,3 +69,69 @@ m("div", { } }) ``` + +## 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", ); +``` + +### `v1.x` + +```js +m("div", m()); +```