blocs/blocs: 条件分岐（data-exist/none/if/unless）による表示制御

blocs/blocs: 条件分岐（data-exist/none/if/unless）による表示制御

テンプレート内で変数の値や条件に応じてタグの表示・非表示を切り替える方法を説明します。

変数値の有無による制御（data-exist / data-none）

data-exist は変数に値がある場合、data-none は値がない場合にタグを表示します。値の有無は empty で判定され、0 も「値がない」とみなされます。タグ記法・コメント記法の両方で使用できます。

サンプルコード

<div data-exist=$message>今日はいい天気</div>
<div data-none=$message>今日は悪い天気</div>

コメント記法:

<!-- data-exist=$message -->
今日はいい天気
<!-- data-endexist -->

<!-- data-none=$message -->
今日は悪い天気
<!-- data-endnone -->

条件式による制御（data-if / data-unless）

data-if は条件式が「真」の場合、data-unless は条件式が「偽」の場合にタグを表示します。data-exist/none より柔軟で複雑な条件を指定できます。タグ記法・コメント記法の両方で使用可能です。

サンプルコード

$message が fine の場合:

<div data-if="$message == 'fine'">今日はいい天気</div>
<div data-unless="$message == 'fine'">今日は悪い天気</div>

コメント記法:

<!-- data-if="$message == 'fine'" -->
今日はいい天気
<!-- data-endif -->

<!-- data-unless="$message == 'fine'" -->
今日は悪い天気
<!-- data-endunless -->

条件を満たすときにタグに属性を追加する

<!-- :readonly data-if="true == $isReadonly" -->
<input type="text" value="今日はいい天気">

$isReadonly が true の場合、readonly 属性が付与され入力欄が編集不可になります。

QA

変数がセットされていない時にデフォルト値を表示したい

data-val は変数に値がない場合、タグ内の元のテキストをそのまま表示します。

<div data-val=$name>名無し</div>

$name に値がある場合はその値が表示され、値がない場合は「名無し」が表示されます。

属性ごとの「値がある」の判定

0 を条件分岐で表示したい場合は data-if / data-unless を使ってください（例: data-if="isset($zero)"）。