この記事は,Slim を既にちょっぴり知っている方向けに,属性値の書き方で「へえ,そう書けるんだ。いいね」的な小ネタを若干拾ったもの。
◎Slim をご存じない方へ
Slim は簡潔な記述と高速変換を特長とする,HTML,XML 向けの Ruby 製テンプレートエンジン。
(2017-02-07 追記)Slim のより良い書き方を集めた下記の記事もご覧ください。
属性値の文字列化
属性値は自動的に文字列化してくれる。従って,
td colspan="2"
などと書かなくても
td colspan=2
でいい。もちろん
td colspan=(n+2)
みたいな式を書いたり,
- [:name, :age].each do |field_name|
div class=field_name = params[field_name]
みたいにシンボルを与えてもいい。
ちなみに属性値に nil
や false
を与えると,属性自体が出力されない。つまり,
div class=nil
は
<div></div>
となる。
クラスのマージ
例えば
div class="foo" id="bar" class="baz"
のように二つの class
を書いても
<div class="foo baz" id="bar"></div>
のように,まとめてくれる。
クラスのドット記法を混ぜて
div.foo class="bar"
と書いても期待通り
<div class="foo bar"></div>
のようにまとめてくれる。
クラスを追加
変数 is_happy
が真のときだけ happy
クラスを追加したいとき,
div.item class=('happy' if is_happy)
みたいに書ける。Ruby って,is_happy
が偽のとき
'happy' if is_happy
の評価値は nil
だよね。だから,上記のような Slim コードは,is_happy
が真のときは
<div class="item happy"></div>
となり,偽のときは
<div class="item"></div>
となる。まったくもって期待通り!
追記(2016-02-14)
属性値が "false" の場合
属性値として "true", "false" を取る列挙型属性がある。これは要注意。
例えば,textarea などでスペルチェックを行うかどうかを指定する spellcheck
属性 がこれにあたる。
以下のようにすれば,(ブラウザーが対応していれば)スペルチェックが無効になる。
<textarea spellcheck="false"></textarea>
しかし,これを Slim で書くのに
textarea spellcheck=false
とやったのではダメ。=
の右側は Ruby の式として評価され,false
は偽なので以下のように属性自体が無くされてしまう。(nil
も同じ)
<textarea></textarea>
正しくは
textarea spellcheck="false"
のように,文字列リテラルで与える。
同じように,"true"
も
textarea spellcheck=true
はダメ。これだと
<textarea spellcheck=""></textarea>
のようになってしまう。正しくは
textarea spellcheck="true"
とする。