Mithril Phonecat Application

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.1/mithril.min.js"></script>
<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-12">
      <div id="root"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px}
.search{margin-bottom: 20px}

CoffeeScript

phones = [
  {
    'name': 'Nexus S'
    'snippet': 'Fast just got faster with Nexus S.'
  }
  {
    'name': 'Motorola XOOM™ with Wi-Fi'
    'snippet': 'The Next, Next Generation tablet.'
  }
  {
    'name': 'MOTOROLA XOOM™'
    'snippet': 'The Next, Next Generation tablet.'
  }
]

PhoneList = 
  view: (ctrl, props) ->
    m "ul.list-group", props.phones.map (d, i) ->
      m 'li.list-group-item', [
        m 'b', d.name
        m 'br'
        m 'small', d.snippet
      ]
      
Search = 
  view: (ctrl, props) ->
    m '.search', [
      m 'h4', 'Search'
      m 'input[type="search"].form-control', {
        oninput: props.handleChange
      }
    ]
    
App = 
  controller: ->
    query: m.prop("")
  view: (ctrl, props) ->
    # on input to search update query parameter
    handleChange = (e) =>
      ctrl.query(e.target.value).toLowerCase()
    # display only phones that contain the query
    phonesInView = ->
      props.phones.filter (d) -> 
        d.name.toLowerCase().indexOf(ctrl.query()) >= 0
    m '#app.well', [
      m Search, {handleChange: handleChange}
      m PhoneList, {phones: phonesInView()}
    ]

m.mount(
  document.getElementById("root"),
  m App, {phones: phones}
)

Gists = m.request
  method: "GET"
  url: "https://api.github.com/users/octocat/gists"
  
#Gists.then (d) -> console.log d