Mithril Devize

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//www3.nd.edu/~jeff/mathprog/js/codemirror.js"></script>
<link rel="stylesheet" href="//www3.nd.edu/~jeff/mathprog/css/codemirror.css">
<script src="//codemirror.net/addon/hint/show-hint.js"></script>
<div class="container" id="main">
  
</div>
<div class="container">
  <div id="editor"></div>
</div>

CSS

#main{margin-top: 20px;}
.CodeMirror{
  height: 100px;
}

CoffeeScript

TextInput = view: ->
  m 'input', {type: "text", class: "form-control"}
  

Main = 
  controller: ->
    n: m.prop(1)
  view: (ctrl) -> [
    m 'div', [1..ctrl.n()].map (d) -> [
      m '.row',  [1..4].map (d) ->
        m '.col-xs-3', m TextInput
      m 'br'
    ]
    m '.row',
      m 'button.btn.btn-sm.btn-primary', {
        onclick: (e) -> ctrl.n(ctrl.n() + 1)
      }, "Update"
   ]
    
m.mount(
  document.getElementById("main"),
  m Main
)

modelEditor = CodeMirror.fromTextArea(document.getElementById("editor"), {
    lineNumbers: true,
    lineWrapping: true,
    mode: 'mathprog'
});