Mithril MDL

by Yoshiharu Kamata

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="//storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<script src="//fonts.googleapis.com/icon?family=Material+Icons"></script>

SCSS

.mdl-card {
    margin: auto;
}

CoffeeScript

homePage =
  view: -> [
    m ".mdl-card.mdl-shadow--4dp", [
      m ".mdl-card__title", [
        m "h2.mdl-card__title-text", "title"
      ]
      m ".mdl-card__media", "media"
      m ".mdl-card__supporting-text", "text"
      m ".mdl-card__actions", [
        m "a[href='/items/abc']", config: m.route, "abc"
      ]
    ]
    m ".mdl-grid", [
      m ".mdl-cell.mdl-cell--4-col", "div"
      m ".mdl-cell.mdl-cell--4-col", "aaa"
    ]
    m ".mdl-layout.mdl-js-layout",[
      m "header.mdl-layout__header", [
        m ".mdl-layout-icon"
        m ".mdl-layout__header-row", [
          m "span.mdl-layout-title", "Home"
          m ".mdl-layout-spacer"
        ]
      ]
      
      m "main.mdl-layout__content", [
        m "h1", "home"
        m "a[href='/items/abc']", config: m.route, "abc"
      ]
    ]
  ]

itemPage =
  controller: ->
    id: m.route.param 'id'
  view: (controller)-> [
    m 'h1', 'item'
    m 'p', controller.id
    m "a[href='/']", config: m.route, "home"
  ]
m.route.mode = "hash"

m.route document.body, "/",
  "/": homePage
  "/items/:id": itemPage