Mithril with Onsen Components

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/1.3.14/css/onsen-css-components.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

CoffeeScript

tab_bar_item = 
  view: (c, props) ->
    m "label.tab-bar__item", [
      m "input[type='radio']", {
        checked: props.label is 'One'
        name: 'group'
       }
      m "button.tab-bar__button", [
        m "i.tab-bar__icon ion-#{props.icon}"
        m ".tab-bar__label", props.label
      ]
    ]
      
tab_bar = 
  view: (c, props) ->
    m 'div.tab-bar', props.map (p) -> 
     console.log(p)
     m.component tab_bar_item, p
                 
tab_data = [
  {icon: "stop", label: "One"}
  {icon: "record", label: "Two"}
  {icon: "star", label: "Three"}
]

my_tab_bar = m.component(tab_bar, tab_data)

###
<div class="navigation-bar">
  <div class="navigation-bar__left">
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
    </span>
  </div>

  <div class="navigation-bar__center">
    Navigation Bar
  </div>

  <div class="navigation-bar__right">
    <span class="toolbar-button--quiet navigation-bar__line-height">Label</span>
  </div>
</div>
###

nav_bar = 
  view: ->
    m '.navigation-bar', [
      m '.navigation-bar__left', 
       m 'span.toolbar-button--quiet navigation-bar__line-height',
        m 'i.ion-navicon'
    ]


App = 
  view: ->
    m 'div', [nav_bar, my_tab_bar]

m.mount(document.body, App)