getRendered でclass指定
a-blog cms の getRendered はなにかと便利ですが、テンプレートエンジンの実行順序としては一番最後に処理される機能になります。なので、IF文の処理条件として使うことはできません。しかし、getRenderedを使うたびに、処理順序をすっかり忘れてIF文の条件にgetRenderedを使おうとして表示されなくて焦るという行為を繰り返している気がするので今度こそ忘れないようにブログにすることにしました。
setRendered / getRenderedでやりたかったこと
今回戸惑ってしまった実装は、ざっくり説明するとこんな感じでした。
実装条件
- カテゴリーのカスタムフィールドに入っている、とあるリストを表示させる実装をする（ulでマークアップ）。
- 表示させたいリスト項目はA〜Cの3つ。
- 項目Aは、値が入っていたとしても、さらにいくつかの条件が揃わなければ表示させてはいけない。
- 項目B・Cは値が入っていれば表示させる。
- リストは項目が全て空（Aについては表示させない条件）だった場合非表示にすること。
やりたかったこと
条件3があるため、項目Aの li をいくつかの条件を指定するためのIF文で囲う必要があります。条件4については、項目B・Cの li を veil で囲うだけで良さそうです。
しかし、条件5があるため ul を、項目Aを表示させる条件文、項目B・Cに値が入っているかを判定する条件文でくくる必要があります。この時、項目Aの li を囲っている条件文と、ul 全体をくくる条件文は「いくつかの条件」であり、結構長いIF文になる想定です。そうすると結構長いIF文を2箇所書く必要が出てきてしまいます。
そこで、結構長いIF文の記載を一つにするため setRendered 機能を使うことにしました。
ダメな実装例
getRenderedをIF文に入れてしまった例です。これでは動きません。
<!-- BEGIN_MODULE Category_Field -->
<!-- BEGIN_IF[リスト項目Aを表示する結構長い条件いくつか] -->
<!-- BEGIN_SetRendered id="list_a" -->list-a-true<!-- END_SetRendered -->
<!-- END_IF -->
<!-- BEGIN_IF [<!-- GET_Rendered id="list_a" -->/eq/list-a-true/_and_/{list_b}/nem/_and_/{list_c}/nem] -->
<h2>{name}リスト</h2>
<ul>
<!-- BEGIN_IF [<!-- GET_Rendered id="list_a" -->/eq/list-a-true] -->
<li>A.{list_a}でした。</li>
<!-- END_IF -->
<!-- BEGIN list_b:veil -->
<li>B.{list_b}でした。</li>
<!-- END list_b:veil -->
<!-- BEGIN list_c:veil -->
<li>C.{list_c}でした。</li>
<!-- END list_c:veil -->
</ul>
<!-- END_IF -->
<!-- END_MODULE Category_Field -->setRendered / getRendered は テンプレートエンジンの実行順序としては一番最後に処理される機能になります。なので、IF文の処理条件として使うことはできません。
IF文の中に入れないようにした実装例
<style>
.d-none {
display: none;
}
</style>
<!-- BEGIN_MODULE Category_Field -->
<!-- BEGIN_IF[リスト項目Aを表示する結構長い条件いくつか] -->
<!-- BEGIN_SetRendered id="list_a" -->{list_a}<!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="list_show_1" -->-list-show-1<!-- END_SetRendered -->
<!-- END_IF -->
<div class="d-none<!-- GET_Rendered id="list_show_1" --><!-- BEGIN_IF [{list_b}/nem/_or_/{list_c}/nem] -->-list-show-2<!-- END_IF -->">
<h2>{name}リスト</h2>
<ul>
<li class="d-none<!-- GET_Rendered id="list_show_1" -->">A.{list_a}でした。</li>
<!-- BEGIN list_b:veil -->
<li>B.{list_b}でした。</li>
<!-- END list_b:veil -->
<!-- BEGIN list_c:veil -->
<li>C.{list_c}でした。</li>
<!-- END list_c:veil -->
</ul>
</div>
<!-- END_MODULE Category_Field -->d-none という display:none; の値を持っているクラスを用意し、getRendered した時に値が入って入ればクラス名が d-none-list-show-* になり display:none; 指定が解除されるという仕組みです。
