読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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

javascript/node.js jade

&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恐るべし……