Re-initializing a Component Using Key - With Routing

24 September 2020 by osban

Level: beginner • Mithril.js Version: latest

component key m.route vnode

To distinguish similar vnodes from eachother, use the KEY attribute (keyword), and give it a unique value. Keep in mind that all siblings must be keyed for it to work. See also the Mithril.js docs. This can be used to force a component to re-instantiate/re-initialize. In this example 4 options with routing. Date.now() is used to make sure the KEY is different each time. To try out the different options, change the default route to the specific option.

Live Example #

JavaScript #

// option 1 -> key is passed via attrs
const page1 = {
  oninit: () => {console.log('init1')},
  view: vnode => [
    m('p', 'page1 ' + (vnode.attrs.key || '')),
    m('button', {onclick: () => m.route.set('/page1', {key: Date.now()})}, 're-init')
  ]
}

// option 2 -> key is passed as url parameter
const page2 = {
  oninit: () => {console.log('init2')},
  view: () => [
    m('p', 'page2 ' + m.route.param('key')),
    m('button', {onclick: () => m.route.set('/page2/' + Date.now())}, 're-init')
  ]
}

// option 3 -> id is passed as url parameter and also used as key
const page3 = {
  oninit: () => {console.log('init3')},
  view: vnode => [
    m('p', 'page3 ' + vnode.attrs.id),
    m('button', {onclick: () => m.route.set('/page3/' + Date.now())}, 're-init')
  ]
}

// option 4 -> use m.route.set() to re-init the current page
const page4 = {
  oninit: () => {console.log('init4')},
  view: vnode => [
    m('p', 'page4 ' + (vnode.attrs.key || '')),
    m('button', {onclick: () => m.route.set(m.route.get(), {key: Date.now()})}, 're-init')
  ]
}

m.route(document.body, '/page4', {
  '/page1'     : page1,
  '/page2/:key': page2,
  '/page3/:id' : {render: vnode => [m(page3, {id: vnode.attrs.id, key: vnode.attrs.id})]},
  '/page4'     : {render: vnode => [m(page4, {key: vnode.attrs.key})]}
})

The snippet is using the most current version of Mithril.js framework. It is aimed at beginners and shows some basic recipes.

In addition to the Mithril.js hyperscript function m(), here we can see an example of Mithril.js' m.route API method. In this example we can also see the usecase of Vnodes (virtual DOM nodes) which is a JavaScript data structure that describes a DOM tree.

The example was contributed by osban and last modified on 24 September 2020. Click here to see more examples contributed by the author.

Contribute #

If anyone has some improvements, that should be addressed, let me know by opening an issue. Or simply fork the repository on GitHub, push your commits and send a pull request. For starting your work, you can click the edit link below. Thanks for contributing.

See more code examples  •  Edit this example on GitHub