Mithril Template

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css">
<div class="container" id="main">
  <div class="col-xs-12 col-md-6">
    <div id="app"></div>
  </div>
</div>

CSS

#main{
  margin-top: 20px;
}

Babel + JSX

/** @jsx m */

const App = {
  view(ctrl, { store }){
    return (
      <div>
        <input type='text'
          className="form-control"
          value={store.text()}
          oninput={m.withAttr("value", store.text)}
        />
        <h2>Hello {store.text()}</h2>
      </div>
    )
  }
}

const myStore = {
  text: m.prop("Ramnath")
}

m.mount(
  document.querySelector("#app"),
  <App store={myStore}/>
)

const changeText = () => {
  m.startComputation()
  myStore.text("Jane Doe")
  m.endComputation()
}

setTimeout(changeText, 1000)