既存の一覧ページにMithril.jsを混ぜ込もう

こちらは Mithril.js advent calendar 22日目の記事です

今日は既存のコードにmithrilを混ぜ込む話をします。

どんなことをする？

• 既にサーバサイドでviewをレンダリングしている
• 何かの商品一覧ページの
• 各商品に
• お気に入りボタンを設置する

slimで書いてみます。

app/views/items/index.html.slim

.item-list
  @items.each do |item|
    .item
      strong = item.name
      a href="/item/#{item.id}"
        | 詳細ページでみる

何らかの商品の名前とその商品の詳細ページへのリンクが貼られている一覧ページぽいですね。

各商品に「お気に入り」ボタンを設置する

mithrilのマウント例って大体m.mount(document.getElementById('mount-id'), component);という感じなので、複数マウントしたいケースで一瞬迷いますが、結構簡単にできます。
方法としては、マウント先としてmount-item-favoriteクラスを各商品に置くだけです。
js側で利用したいデータは、マウント先にdata属性として書いておきましょう。

app/views/items/index.html.slim

.item-list
  @items.each do |item|
    .item
      strong = item.name
      a href="/item/#{item.id}"
        | 詳細ページでみる
      .mount-item-favorite data-is-favorite="#{user.favorite?(item)}"

app.coffee

Array.prototype.forEach.call document.getElementsByClassName('mount-item-favorite'), (element) ->
  isFavorite = element.getAttribute 'data-is-favorite'

  vm = 
    doFavorite: ->
      isFavorite = true
      m.request(....) # サーバサイド変更
    doUnFavorite: ->
      isFavorite = false
      m.request(....) # サーバサイド変更

  component = 
    view: ->
      m('div', [
        if isFavorite
          m('a.btn', { onclick: vm.doUnFavorite.bind(vm) }, 'お気に入り済み')
        else
          m('a.btn', { onclick: vm.doFavorite.bind(vm) }, 'お気に入りにする')
      ])

  m.mount(element, compenent)

Array.prototype.forEach.callでdocument.getElementsByClassNameをぶん回して後は普通に書くだけですね。
全部Mithrilに書き直すのは辛くても、部分部分をmithrilで作ることができるので、ちょっと古めのサービスでも導入簡単でおすすめです。

クリスマスはmithrilユーザが増えることを祈っております！