SmartyのデリミタをHTMLコメントにした時にタグ中の属性制御で文法エラーにしない方法

SmartyのデリミタをHTMLコメント（で囲む）形式にすると、テンプレートファイルをHTMLとしてエディタで扱うことができ、シンタックスのハイライトを効かせて色分けできるメリットがある。さらにはエディタのHTML文法チェック機能も使えるから、記述効率もアップしてバグも防げる。

だからデリミタを例えば <!--{ と }--> に設定しているプロジェクトも結構あると思う。これでエディタでシンタックスハイライトと文法チェックもできてパッピー！・・・と思いきや、ちょっと問題があるんだよな。

それは、タグ中の属性を制御したい場合。例えば、ラジオボタンやチェックボックスをチェックしているかどうかは、タグ中にchecked属性が存在しているかどうかで決まるから、条件によってチェックを入れたり外したりするには、HTMLタグの中にSmartyのデリミタを書くことになる。これが文法エラーになるわけ。checked属性だけでなくdisabled属性も同じだよね。具体的には、例えばこんな感じ。

<input type="checkbox" name="chk1" value="val1"
  <!--{if $cond1}--> checked="checked"<!--{/if}-->
  <!--{if $cond2}--> disabled="disabled"<!--{/if}-->
/>

上の例は、チェックボックスで$cond1がtrueの時にチェックを入れ、$cond2がtrueの時は操作できなくするもの。だがこれは当然HTMLの文法違反になる。まあ、Smarty通すから文法エラーなんか無視すれば問題ないと言えばそうなんだけど、だったらなんでわざわざデリミタをHTMLコメントで囲う形式にしたのかって話になってしまう。

そこで、少々トリッキーだが、次のようにすることで文法エラーを回避できる。

<input type="checkbox" name="chk1" value="val1"
  data-dummy1="<!--{if $cond1}-->" checked="checked<!--{/if}-->"
  data-dummy2="<!--{if $cond2}-->" disabled="disabled<!--{/if}-->"
/>

ダミーの属性を追加して左右のデリミタを共にダブルクオーテーションの内側に収めたのがポイントだ。これで例えば$cond1と$cond2がtrueの時は、

<input type="checkbox" name="chk1" value="val1"
  data-dummy1="" checked="checked"
  data-dummy2="" disabled="disabled"
/>

$cond1と$cond2がfalseの時は、

<input type="checkbox" name="chk1" value="val1"
  data-dummy1=""
  data-dummy2=""
/>

となるわけだ。data-*という属性はご存知HTML5の独自定義属性の書き方に従っている。ダミーだと分かりやすいように名前をつけるといいと思う。

美しいやり方ではないけれど、エディタや統合開発環境の文法チェックを活かせるという意味で実用的なメリットは有ると思う。

※この記事について指摘・意見・提案・感想などありましたら下のコメント欄にどうそ。