Mithril Event App

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.1/mithril.min.js"></script>
<div id="root"></div>https://jsfiddle.net/ramnathv/h96ma0hb/#

CSS

#root{margin-top: 30px;}
.form-control{margin-bottom: 10px;}
body{font-family: Helvetica;}

CoffeeScript

# Dummy events data
events = [
  {
    id: 1
    name: 'TIFF'
    description: 'Toronto International Film Festival'
    date: '2015-09-10'
  }
  {
    id: 2
    name: 'The Martian Premiere'
    description: 'The Martian comes to theatres.'
    date: '2015-10-02'
  }
  {
    id: 3
    name: 'SXSW'
    description: 'Music, film and interactive festival in Austin, TX.'
    date: '2016-03-11'
  }
]


fbind = (data) ->
  onchange: (e) -> 
    data()[e.target.name] = e.target.value
    console.log(data())

Panel = 
  view: (ctrl, props) ->
    m '.panel.panel-default', [
      m '.panel-heading', props.title
      m '.panel-body', props.body
    ]

Page = 
  view: (ctrl, props) ->
    m 'div.container-fluid',
      m 'div.row', [
        m 'div.col-xs-12.col-md-6', props.EntryForm
        m 'div.col-xs-12.col-md-6', props.EventList
      ]
      
Form = 
  view: (ctrl, props) ->
    m 'form', fbind(props.event), [
      m 'input.form-control[type="text"]', 
       {name: "name", placeholder: "Event Name", value: props.event().name}
      m 'textarea.form-control', {name: "description", placeholder: "Event Description", value: props.event().description}
      m 'input.form-control[type="date"]', {name: "date", value: props.event().date}
      m 'button[type="submit"].btn.btn-primary', {
        onclick: props.addEvent
      }, "Submit"
    ]

EntryForm = 
  view: (ctrl, props) ->
    m Panel,
      title: m 'h3', "Add Event"
      body: m Form, 
        event: props.event
        addEvent: (e) => 
          e.preventDefault()
          props.events().push(props.event())
          props.event(["", "", ""])
          
    
Event = 
  view: (ctrl, props) ->
    m 'a[href="#"].list-group-item', [
      m 'h4.list-group-item-heading', [
        m 'i.glyphicon.glyphicon-bullhorn'
        " #{props.name}"
      ]
      m 'h5', [
        m 'i.glyphicon.glyphicon-calendar'
        " #{props.date}"
      ]
      m 'p.list-group-item-text', props.description
      m...