diff --git a/docs/v1.x-migration.md b/docs/v1.x-migration.md index 54a047c5..f656fc01 100644 --- a/docs/v1.x-migration.md +++ b/docs/v1.x-migration.md @@ -6,7 +6,9 @@ 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) +- [Component arguments](#component-arguments) - [Passing components to `m()`](#passing-components-to-m) +- [`m.route` and anchor tags](#mroute-and-anchor-tags) ## `config` function @@ -120,6 +122,42 @@ m.mount(document.body, { }); ``` +## Component arguments + +Arguments to a component in `v1.x` must be an object, simple values like `String`/`Number`/`Boolean` will be treated as text children. Arguments are accessed within the component by reading them from the `vnode.attrs` object. + +### `v0.2.x` + +```js +var component = { + controller : function(options) { + // options.fooga === 1 + }, + + view : function(ctrl, options) { + // options.fooga == 1 + } +}; + +m("div", m(component, { fooga : 1 })); +``` + +### `v1.x` + +```js +var component = { + oninit : function(vnode) { + // vnode.attrs.fooga === 1 + }, + + view : function(vnode) { + // vnode.attrs.fooga == 1 + } +}; + +m("div", m(component, { fooga : 1 })); +``` + ## 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. @@ -135,3 +173,27 @@ m("div", ); ```js m("div", m()); ``` + +## `m.route()` and anchor tags + +Handling clicks on anchor tags via the mithril router is similar to `v0.2.x` but uses a new lifecycle method and API. + +### `v0.2.x` + +```js +// When clicked this link will load the "/path" route instead of navigating +m("a", { + href : "/path", + config : m.route +}) +``` + +### `v1.x` + +```js +// When clicked this link will load the "/path" route instead of navigating +m("a", { + href : "/path", + oncreate : m.route.link +}) +```