Ratchet with Mithril Experiments

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.min.js"></script>
<!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">
            <a class="push-right" href="http://goratchet.com">
              <strong>Ratchet documentation</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://github.com/twbs/ratchet/">
              <strong>Ratchet on Github</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
              <strong>Ratchet Google group</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://twitter.com/goratchet">
              <strong>Ratchet on Twitter</strong>
            </a>
          </li>
        </ul>
      </div>
    </div>

Babel + JSX

/** @jsx m */

const Header = {
  view(ctrl, props, children){
    return(
      <header class="bar bar-nav">
        <h1 class="title">{children}</h1>
      </header>
    )
  }
}

const TableViewCell = {
  view(ctrl, props, children){
    return (
      <li className="table-view-cell">
        {children}
      </li>
    )
  }
}

const TableView = {
  view(ctrl, props){
    return(
      <ul className="table-view">{
      props.items.map(d => <TableViewCell>{d}</TableViewCell>)
      }</ul>
    )
  }
}

const App = {
  view(){
    return (
      <div>
        <Header>Employee Directory</Header>
        <div className="content">
          <TableView items={[1, 2, 3, 4]} />
        </div>
      </div>
    )
  }
}

m.mount(
  document.getElementById("app"),
  <App />
)