kaakaa Blog

この世は極楽 空にはとんぼ

jade4jでbootstrapのgridが上手く書けない

neuland/jade4j: a jade implementation written in Java

jade4j、というかインデントで構造を表すテンプレートエンジンで、下記みたいなHTMLを出力したいんだけどやりかたが分からない。

<div class="row">
  <div class="col-md-4">余市</div>
  <div class="col-md-4">角</div>
  <div class-"col-md-4">響</div>
</div>
<div class="row">
  <div class="col-md-4">ボウモア</div>
  <div class="col-md-4">ラフロイグ</div>
  <div class="col-md-4">アードベッグ</div>
</div>

余市、角、響・・・などの文字はリストで渡されているものとする。

なんのことは無いbootstrap的なGridレイアウト。
ただ、3要素ごとにrowクラスのdivタグを出力したいだけ。

each w,i in whiskeys
  if i % 3 == 0
    .row
  .col-md-4 #{w}

とかって書くと、rowcol-md-4が同じインデントで出力されてしまうので、rowの意味が無くなってしまう。


と書いてる内にgridを検索ワードに含めて調べれば良いことに気づき、調べてみると下記リンク。

html - Jade each iteration modulus for responsive Twitter Bootstrap - Stack Overflow

これだと、3の倍数のリストを渡すようにすれば良いということらしいが、ビューとコントローラーの暗黙的な結合度が高くなるので気持ち悪いなぁ…。


jadeと同じくインデントで階層を表すhamlで調べてみた。

haml - How to create a helper for build grids in Ruby On Rails - Stack Overflow

Rubyにはeach_sliceなるメソッドがあるのね…。
今使ってるのはJava・・・。

実装しようとしたけど上手く出来なそうなので、一旦寝かしておこう。