Mithril List

by ramnathv

CoffeeScript

binds = (prop, args = {}) ->
  args.on
List =
  controller: (args) ->
    todos: m.prop(args.data)
    new_todo: m.prop("")
    add_todo: (e) ->
      @todos().push({text: e.target.value})
      
  view: (ctrl, args) -> [
    m "input[type='text']", {
       onchange: ctrl.add_todo.bind(ctrl),
       value: ctrl.new_todo()
     }, "Add Todo"
    m "ul", ctrl.todos().map (todo) ->
      m "li", todo.text
  ]
 
todos = [
 { text: 'Learn JavaScript' },
 { text: 'Learn Vue.js' },
 { text: 'Build Something Awesome' }
]

myList = m.component(List, {data: todos}) 
#m.mount(document.body, myList)

binds = (prop, value = "value", args = {}) ->
  args.onchange = m.withAttr(value, prop)
  args[value] = prop()
  return args

App = 
  controller: ->
    message: m.prop("Hello, Mithril")
    checked: m.prop(false)
    reverseMessage: ->
      @message(@message().split("").reverse().join(""))
  view: (ctrl) ->
    m "#app", [
      m "p", ctrl.message() 
      m "button", 
        {onclick: ctrl.reverseMessage.bind(ctrl)},
        "Reverse Message"
      m "input[type='checkbox']", binds(ctrl.checked, "checked")
      m "label", ctrl.checked().toString()
    ]


m.mount(document.body, App)