Mithril Bootstrap Views

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>

CSS

.container{margin-top: 20px;}
.panel-default{border-radius: 0px;}
.list-group-item{border-radius: 0px;}

CoffeeScript

Menu = 
  view: (ctrl, props) ->
    m '.row', m '.col-xs-12.col-md-6',
     m '.btn-group', {style: {"margin-left": "15px", "margin-bottom": "15px"}},
      m 'a[href="/panel"].btn.btn-default', {config: m.route}, 
        m 'span.glyphicon glyphicon-th-large'
      m 'a[href="/list"].btn.btn-default', {config: m.route}, 
        m 'span.glyphicon glyphicon-th-list'
PanelView = 
  view: (ctrl, props) ->
    m '.container', 
      m Menu
      m '.row', m '.col-xs-12.col-md-6',
        props.items.map (d) -> 
          m '.col-xs-6.col-md-6', 
            m '.panel.panel-default', 
              Object.keys(d).map (k) -> m ".panel-#{k}", d[k]
        
ListView =
  view: (ctrl, props) ->
    m '.container', 
      m Menu
      m '.row', m '.col-xs-12.col-md-6',
        m 'ul.list-group', props.items.map (d) -> 
          m 'li.list-group-item', 
            m 'b', d.heading
            m 'br'
            m 'small', d.body

generate_data = (n) ->
  [0...n].map (i) -> heading: "Panel #{i}", body: "Body #{i}"
data = generate_data(20)

m.route document.body, "/panel", {
  "/panel": m PanelView, {items: data}
  "/list": m ListView, {items: data}
}