Validation Example

by ramnathv

HTML

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

CSS

#main{margin-top: 20px;}

CoffeeScript

ListGroup = view: (ctrl, props) ->
  m 'ul.list-group', props.items.map (d, i) -> 
    m 'li.list-group-item', {key: i}, d
    
Item = view: (ctrl, props) ->
  satisfied = if props.satisfied then "ok" else "remove"
  clr = if props.satisfied then "darkgreen" else "darkred"
  m "span", {style: color: clr},
    props.text
    m "span.glyphicon.glyphicon-#{satisfied}.pull-right"
    
Item2 = view: (ctrl, props) ->
  satisfied = if props.satisfied then "ok" else "remove"
  clr = if props.satisfied then "darkgreen" else "darkred"
  m "span", {style: color: clr},
    m "span.glyphicon.glyphicon-#{satisfied}"
    props.text

    
items = (props) -> [
  m Item,
    text: ' O input should have fields variable and coefficient'
    satisfied: props.satisfied[0]
  m Item,
    text: ' A or B inputs should have fields dir and rhs'
    satisfied: props.satisfied[1]
]
 
items2 = [
  m Item2,
    text: ' O input should have fields variable and coefficient'
    satisfied: true
  m Item2,
    text: ' A or B inputs should have fields dir and rhs'
    satisfied: false
]

App =
  controller: ->
    satisfied: m.prop([false, false])
    text1: m.prop("")
    text2: m.prop("")
  view: (ctrl, props) -> [
    m 'input[type="text"].form-control',
      value: ctrl.text1()
      oninput: m.withAttr("value", ctrl.text1)
    m 'br'
    m 'input[type="text"].form-control',
      value: ctrl.text2()
      oninput: m.withAttr("value", ctrl.text2)
    m 'br'
    m ListGroup, items: items {
      satisfied: [
        ctrl.text1() is "var, coef",
        ctrl.text2() is "dir, rhs"
      ]}
  ]
  
m.mount(
  document.getElementById('app'),
  m App
)