Mithril Lifecycle Order On Redraw

by András Parditka

HTML

<script src="https://rawgit.com/MithrilJS/mithril.js/v1.1.3/mithril.js"></script>
<div id="app"></div>

JavaScript

var data = {
  count: 0,
}

var Redrawer = {
  view: function (v) {
    return m('div', v.attrs.name)
  },
  onupdate: function (v) {
    console.log(v.attrs.name + ': onupdate')
    if (--data.count) {
      m.redraw()
    }
  },
}

var App = {
  onbeforeupdate: function (v) {
    console.log('--- Start redraw ---')
  },
  view: function () {
    return m('div',
      m(Redrawer, { name: 'Redrawer' }),
      m('button', {
        onclick: () => {
          data.count = 10
        }
      },
        'Start'
      ),
      m('div', { onupdate: function () { console.log('--- End redraw ---') } })
    )
  }
}

m.mount(document.getElementById('app'), App)