Mithril List Group

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

CoffeeScript

ListGroup = 
  controller: (args) ->
     data: args.data
     active: args.active || m.prop(0)
     is_active: (i) ->
       if i is @active() then ' active' else ''
  view: (c, args) ->
     m '.list-group', args.data.map (d, i) ->
       m "a[href='#'].list-group-item#{c.is_active(i)}", 
         {onclick: (e) -> c.active(i)},
         m 'h4.list-group-item-heading', d.title
         m 'p.list-group-item-text', d.content
          
            
mydata = [1, 2, 3, 4].map (i) ->
   {title: "Title #{i}", content: "Content #{i}"}
    




Bootstrap = 
  controller: (args) ->
    active: m.prop(0)
  view: (c, args) ->
    m '.container-fluid',
      m '.row', 
        m '.col-xs-12.col-sm-6', [
          m.component(ListGroup, {data: mydata})
          m.component(ListGroup, {data: mydata})
        ]



m.mount(document.body, Bootstrap)