web-dev-qa-db-ja.com

Sightlyテンプレートの条件付き属性（AEM / CQ）

Sightlyテンプレート言語でAdobeAEM6（CQ）の場合、多くのコード/ロジックを複製せずに、条件が真の場合にのみ要素に属性を追加するにはどうすればよいですか？

例えば.

<ul data-sly-list="${items}" ${if condition1} class="selected"${/if}>
    <li${if condition2} class="selected"${/if}>
        Lots of other code here
    </li>
</ul>
aemtemplatingsightly
13
Alasdair McLeay

HTML属性を動的に（式を使用して）設定する場合、Sightlyは記述を単純化する意図を推測します。

  • 値が空の文字列であるか、偽のブール値である場合、属性は完全に削除されます。
    たとえば、<p class="${''}">Hi</p>と<p class="${false}">Hi</p>は<p>Hi</p>だけをレンダリングします。

  • 値が真のブール値である場合、属性はブール値のHTML属性として書き込まれます（つまり、チェック済み、選択済み、または無効化されたフォーム属性など、属性値なし）。
    たとえば、<input type="checkbox" checked="${true}">は<input type="checkbox" checked>をレンダリングします。

次に、2つのSightly演算子を使用して、目的を達成できます（どちらも、JavaScriptの場合と同様に機能します）。3項条件演算子、または論理AND（&&）演算子です。

三項条件演算子

<ul data-sly-list="${items}" class="${condition1 ? 'selected' : ''}">
    <li class="${condition2 ? 'selected' : ''}">
        Lots of other markup here
    </li>
</ul>

論理AND演算子

そのためには、JavaScriptの場合と同様に、${value1 && value2}が偽物（falseや空の文字列など）の場合はvalue1を返し、それ以外の場合はvalue2を返すことを理解する必要があります。

<ul data-sly-list="${items}" class="${condition1 && 'selected'}">
    <li class="${condition2 && 'selected'}">
        Lots of other markup here
    </li>
</ul>

前述のように、どちらの例でも、対応する条件がfalseの場合、クラス属性は完全に削除されます。

26
Gabriel Walt

ガブリエルが言ったことは完全に正しい。ただし、注意すべき「落とし穴」を追加したかったのです。記録のために、私はまったく同じ問題に遭遇しました。Sightlyテンプレートで、ブール値に基づいて入力要素の「チェック済み」属性の存在を切り替えたいと思っていました。私の場合、このブール値はバッキングUseクラスからのものでした。

約3〜4時間後、髪の毛を抜く寸前でしたが、「チェック済み」属性を切り替えるために信頼していたブール値が、最終的に私が書き戻したSlingサービスのアクティブ化メソッドに設定されていることに気付きました。私がしている仕事。他のすべては論理的に正しいものでしたが、私はこのブール値をactivate（）に設定し、必要に応じてゲッターを介して取得していたため、バンドルのアクティブ化時にのみ値が更新されました。つまり、ビューの最初の更新後に本質的に状態が失われます。ページ。

私はそれがばかげていることを知っていますが、それはここに関連していて、誰かが私のように髪を失う必要がないのを助けるかもしれないので、私はそれを呼びたかったです...

0
Josh Boyle