DEV Community

artydev
artydev

Posted on

Mithril Gems...

Did I say Mithril is really awesome ? Futhermore, the community behind is very active.
Among the community I must cite Oscar (Osban) who constantly and patiently responds to any questions. Here is one of what I call 'little gem" from Oscar.
He uses a very nice CssInJS library called bss from Porsager.

const app = () => {
  const list = [{c: 1, t: 'one'},{c: 2, t: 'two'},{c: 3, t: 'three'},{c: 4, t: 'four'}]
  let which = 1

  return {
    view: () => [
      m('div' +b`f left; w 150; bc lightgrey; mr 100`,
        m('ul' +b`listStyle none`,
          list.map(x =>
            m('li' +b.$hover(b`cursor pointer; c red`), {onclick: () => which = x.c}, x.t)
          )
        )
      ),
      m('div' +b`pt 50`,
        which === 1 ? m('div', 'ONE')   :
        which === 2 ? m('div', 'TWO')   :
        which === 3 ? m('div', 'THREE') :
        m('div', 'FOUR')
      )
    ]
  }
}

m.mount(document.body, app)

You can test it here List Selection

Top comments (0)