Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

jadeの&attributes記法が、かなりつかえる

&attributes記法HTMLの要素をHashっぽい形で追加できる記法です。

div#foo(name="me")&attributes({'data':42},{'year':2015})

これが

<div id="foo" name="me" data='42' year="2015">

となります。

ただ、この記法の真価はmixin記法と合わせる事で発揮されます。
詳しくは後日書きますが、mixinは似たモノをまとめる記法です。
これにRubyのProcオブジェクトみたいな感じで後付けの要素をくっつけてあげると……

mixin link(href, name)
   a(href=href)&attributes(attributes)= name

+link('/foo', 'foo')(class="blue btn")
br
+link('/foo', 'foo')(class="red btn")
br
+link('/foo', 'foo')(class="yellow btn")

こうなります。

<a href="/foo" class="blue btn">foo</a><br/><a href="/foo" class="red btn">foo</a><br/><a href="/foo" class="yellow btn">foo</a>

恐ろしく省力ですね。
Railsでいうhelperでないとこういう事はできないと思ってましたが。
jade恐るべし……