MithrilJs - How to do radio boxes

If you ever wanted to know how to do radio boxes in mithriljs this is the way I like to do it.

by ramnathv

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.js"></script>

CSS

.val { background: rgb(250,250,250); padding: 16px; margin-bottom: 16px; }
.radio { margin-bottom: 8px; }
.radio label { margin-left: 8px; }

CoffeeScript

App = {}
rb = (val, sel) ->
  m '.radio', [
    m 'input[type="radio"]', {value: val, checked: sel() == val}
    m 'label', val
   ]
    
App.controller = ->
  items: ['cat', 'dog', 'skunk']
  selected: m.prop('cat')
  change: (e) ->
    v = e.target.getAttribute('value')
    @selected(v)

App.view = (ctrl) -> 
 foo = (e) -> 
 [
   m '.val', {}, ctrl.selected()
   m '.radio_buttons', {onchange: ctrl.change.bind(ctrl)}, 
   ctrl.items.map (item) -> rb(item, ctrl.selected)                                              
 ]
  

app =
  controller: ->
    { val: m.prop('skunk') }
  view: (ctrl)->
    fun_check = (val)->
      ->
        ctrl.val(val)
    attrs = (val)->
      onchange: m.withAttr('checked',fun_check(val))
      checked: ctrl.val() == val
      "data-value": val
    
    m '.radio_buttons', {onchange: (e) -> console.log(e.target.getAttribute('data-value'))},
      m '.val', ctrl.val()
      m '.radio',
        m "input[type='radio']", attrs('cat')
        m "label", 'cat'
      m '.radio',
        m "input[type='radio']", attrs('dog')
        m "label", 'dog'        
      m '.radio',
        m "input[type='radio']", attrs('skunk') 
        m "label", 'skunk'        
m.mount document.body, App