Playing with Mithril

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//rawgit.com/philtoms/mithril.elements/master/mithril.elements.min.js"></script>
<div id="main"></div>

CSS

#main{margin-top: 30px;}
.label{margin-right: 5px;}

CoffeeScript

Page = 
  view: (ctrl, props) ->
    m "div.container-fluid",
      m "div.row",
        m "div.col-xs-12.col-md-6", props.children
        
Input = 
  view: (ctrl, props) ->
    m "input[type='text'].form-control", {
      value: props.value()
      oninput: m.withAttr("value", props.value)
    }

m.element("Input", Input)
App = 
  controller: ->
    value: m.prop("")
  view: (ctrl, props) ->
    m ".col-xs-4", [
      m "h3", "New"
      m.component(Input, {value: ctrl.value})
      ctrl.value().split(",").map (d) -> 
        m "span.label.label-success", d
    ]
        
m.mount(
  document.getElementById("main"),
  m.component(Page, {children: m.component(App)})
)