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>
<div id="mount"></div>

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 = (args = {items: ['cat', 'dog', 'skunk']}) ->
  items: args.items
  selected: m.prop(args.items[0]) 
  change: (e) ->
    v = e.target.getAttribute('value')
    @selected(v)

App.view = (ctrl, args) -> 
  # HACK: update view on change of data
  # figure out if there is a better way to do this
  if args.items.indexOf(ctrl.selected()) < 0
    ctrl.selected(args.items[0])
  m 'div', [
    m '.val', {}, ctrl.selected()
    m '.radio_buttons', {onchange: ctrl.change.bind(ctrl)}, 
      args.items.map (item) -> rb(item, ctrl.selected)
   ]

App2 = {}
App2.controller = ->
  items: m.prop(['cat', 'dog', 'skunk'])
  update: -> 
    @items(["Monkey", "Donkey"])
    console.log(@items())
App2.view = (ctrl) -> 
  [
    m.component(App, {items: ctrl.items()})
    m "button", {onclick: ctrl.update.bind(ctrl)}, "Update"
  ]

  
el = document.getElementById('mount')
m.mount(el, App2)

# update list externally
###
d3.select("button").on "click", ->
  app2 = m.component(App, {items: ["Monkey", "Donkey"]})
  m.mount(el, app2)
###
    

  
###
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' 
###