Mithril + Mobservable Experiments Again

by ramnathv

HTML

<script src="//cdn.rawgit.com/mweststrate/mobservable/master/dist/mobservable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>

CSS

.count{margin-left: 10px;}

CoffeeScript

{observable, autorun} = mobservable

App = view: (ctrl, props) ->
  count = -> props.todos.length
  m 'div',
    m 'input[type="text"]', {
      onchange: (e) -> 
        props.todos.push(e.target.value)
        e.target.value = ""
    }
    m 'span.count', count()
    m 'ul', props.todos.map (d, i) -> 
      m 'li', {onclick: (e) -> props.todos.splice(i, 1)}, d
      
App2 = 
  controller: (props) ->
    todos: m.prop([])
  view: (ctrl, props) ->
    count = -> ctrl.todos().length
    m 'div',
      m 'input[type="text"]', {
        onchange: (e) -> 
          ctrl.todos().push(e.target.value)
          e.target.value = ""
      }
      m 'span.count', count()
      m 'ul', ctrl.todos().map (d, i) -> 
        m 'li', {onclick: (e) -> ctrl.todos().splice(i, 1)}, d
    
# State
todos = observable []
todos.push(1)

###
autorun -> 
  m.render(
   document.body,
   m App, {todos: todos}
  )
###

# Action
m.mount(
  document.body,
  m App2
)