Mithril.js persist dom elements on route change

context-retain.js

// The `ul` element *is blinking*
var Navigation = {
  controller: function () {
    return {
      config: (element, initialized, context) => {
        context.retain = true
        console.log(initialized)
      }
    }
  },
  view: (ctrl) => {
    return m('ul', {config: ctrl.config}, [
      m('li', m('a', {href: '/', config: m.route}, 'Home')),
      m('li', m('a', {href: '/user/1', config: m.route}, 'User')),
      m('li', m('a', {href: '/about', config: m.route}, 'About'))
    ])
  }
}

var Home = {
  view: (ctrl) => {
    return [
      m(Navigation),
      m('h1', 'Home')
    ]
  }
}

var User = {
  view: () => {
    return [
      m(Navigation),
      m('h1', 'User')
    ]
  }
}

var About = {
  view: () => {
    return [
      m(Navigation),
      m('h1', 'About')
    ]
  }
}

m.route(document.querySelector('body'), '/', {
  '/': Home,
  '/user/:id': User,
  '/about': About
})

redraw-strategy-diff.js

// The `ul` element is *not* blinking
var Navigation = {
  view: (ctrl) => {
    return m('ul', [
      m('li', m('a', {href: '/', config: m.route}, 'Home')),
      m('li', m('a', {href: '/user/1', config: m.route}, 'User')),
      m('li', m('a', {href: '/about', config: m.route}, 'About'))
    ])
  }
}

var Home = {
  controller: function () {
    m.redraw.strategy('diff')
  },
  view: () => {
    return [
      m(Navigation),
      m('h1', 'Home')
    ]
  }
}

var User = {
  controller: function () {
    m.redraw.strategy('diff')
  },
  view: () => {
    return [
      m(Navigation),
      m('h1', 'User')
    ]
  }
}

var About = {
  controller: function () {
    m.redraw.strategy('diff')
  },
  view: () => {
    return [
      m(Navigation),
      m('h1', 'About')
    ]
  }
}

m.route(document.querySelector('body'), '/', {
  '/': Home,
  '/user/:id': User,
  '/about': About
})

subtree-retain.js

// The `ul` element is *not* blinking
var isInitialized = false

var Navigation = {
  view: (ctrl) => {
    if (!isInitialized) {
      isInitialized = true
      return m('ul', [
        m('li', m('a', {href: '/', config: m.route}, 'Home')),
        m('li', m('a', {href: '/user/1', config: m.route}, 'User')),
        m('li', m('a', {href: '/about', config: m.route}, 'About'))
      ])
    }
    else {
      return {subtree: 'retain'}
    }
  }
}

var Home = {
  view: () => {
    return [
      m(Navigation),
      m('h1', 'Home')
    ]
  }
}

var User = {
  view: () => {
    return [
      m(Navigation),
      m('h1', 'User')
    ]
  }
}

var About = {
  view: () => {
    return [
      m(Navigation),
      m('h1', 'About')
    ]
  }
}

m.route(document.querySelector('body'), '/', {
  '/': Home,
  '/user/:id': User,
  '/about': About
})