jadeでattributeに変数の値を使う方法

jadeでattributeに変数の値を使いたい時に結構つまったので、解決方法をメモしておきます。

例えばこういうDOMを実現したい場合

<div data-test0="test0">test0</div>
<div data-test1="test1">test1</div>
<div data-test2="test2">test2</div>
...

せっかくjadeなので、for文使いたい。。。

何も考えずに書くと以下の様になるかと思います。

- for (var i = 0; i < 3; i++) {
  div(
    data-test#{i}="test#{i}"
  ) test#{i}
- }

でも、このやり方だと、コンパイル後以下のようになります。

<div data-test#{i}="test0">test0</div>
<div data-test#{i}="test1">test1</div>
<div data-test#{i}="test2">test2</div>

ご覧のようにdata-test#{i}が展開されていません！orz...
（attributeの値やdivの中身は展開されています。）

attributeに変数使えないんじゃないかと思ったのですが、
安心してください。やり方があったんです！

&attributes

http://jade-lang.com/reference/attributes/
ここに書いてある&attributesを使えば実現できます。
&attributesにオブジェクト渡すことで、そのオブジェクトをattributeとして展開することができます。

- for (var i = 0; i < 3; i++) {
  - p = {} // attribute用オブジェクトを生成
  - key = 'data-test' + i　// key名がattributeになる
  - p[key] = 'test' + i // valueをset
  div&attributes(p) test#{i}
- }

実行結果

<div data-test0="test">test</div>
<div data-test1="test">test</div>
<div data-test2="test">test</div>

こんな感じで一度オブジェクトに代入してから&attributes()で実行することで、実現できます。
とっても簡単！

困ってたので、実現できてよかったです！