Radio Button Groups with Mithril
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="well" id='mount'>
</div>
<div>
<button id="test1">
test1
</button>
<button id="test2">
test2
</button>
</div>
</div>
CoffeeScript
radio_button = (val, sel) ->
cl = if sel() == val then '.btn-info' else ""
m "label.btn.btn-default#{cl}", {key: name}, [
m 'input[type="radio"]', {value: val, checked: sel() == val}
val
]
button_group =
controller: (args) ->
items: args.items
selected: m.prop(args.selected || args.items[0])
change: (e) ->
v = e.target.getAttribute('value')
@selected(v)
if (args.onchange)
args.onchange(v)
view: (ctrl, args) ->
m '.btn-group', {"data-toggle": "buttons", onchange: ctrl.change.bind(ctrl)},
args.items.map (item) -> radio_button(item, ctrl.selected)
mount = document.getElementById("mount")
mbg = (c) ->
m.component(button_group, {
items: ['Item 1', 'Item 2', 'Item 3'],
selected: 'Item 2',
onchange: c.msg
})
App =
controller: ->
msg: m.prop("Item 2")
view: (c) -> [
mbg(c)
m "Selected", c.msg()
]
m.mount(mount, App)