web-dev-qa-db-ja.com

<div>のようなプレーンなHTML要素を条件付きでレンダリングする方法は？

ユーザーの情報の詳細をプレーンテキストで表示するか、目的の詳細が現在接続しているユーザーのものである場合は編集可能な入力テキストフィールドで表示する複合コンポーネントを実装しようとしています。

すべてのUIコンポーネントはrendered属性を介してレンダリングできることを知っていますが、UIコンポーネントではないものはどうですか（たとえばdivs）

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</div>

<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</div>

Divにはrendered属性がないことを知っており、おそらく正しいアプローチをまったく試していません。 JSTLタグは非常に簡単に使用できますが、それは避けたいと思います。

htmljsf-2conditional-rendering
26
Ionut

HTML <div>要素を表す適切なJSFコンポーネントは、layout属性がblockに設定された<h:panelGroup>です。だから、これはする必要があります：

<h:panelGroup layout="block" ... rendered="#{someCondition}">
    ...
</h:panelGroup>

または、<ui:fragment>でラップします。

<ui:fragment rendered="#{someCondition}">
    <div>
        ...
    </div>
</ui:fragment>

条件付きでレンダリングされたコンポーネントをajax更新する場合は、代わりにその親コン​​ポーネントをajax更新する必要があることに注意してください。

こちらもご覧ください：

55
BalusC

JSF 2.2以降、これは簡単です。パススルー要素を使用することにより、HTML要素を、レンダリングされた属性を持つJSFコンポーネントに変換できます。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
    <div class="userDetails" jsf:rendered="#{cc.attrs.value.id != sessionController.authUser.id}">
        Name: #{cc.attrs.value.name}
        Details: #{cc.attrs.value.details}
    </div>
</html>

詳しくは https://jsflive.wordpress.com/2013/08/08/jsf22-html5/#elements

10
tuner

HTMLを<h:panelGroup>でラップするだけです

<h:panelGroup rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    <div class = "userDetails">
        Name: #{cc.attrs.value.name}
        Details: #{cc.attrs.value.details}
    </div>
</h:panelGroup>

<h:panelGroup  rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <div class = "userDetails">
        <h:form>
           ...
        </h:form>
    </div>
</h:panelGroup>

もう1つのオプションは、プロジェクトに既に含まれているSeam（<s:div>）またはTomahawk（<t:htmlTag>）ライブラリのコンポーネントを使用することです。

参照： http://www.jsftoolbox.com/documentation/seam/09-TagReference/seam-div.html

<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</s:div>

<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</s:div>

または： http://myfaces.Apache.org/tomahawk-project/tomahawk12/tagdoc/t_htmlTag.html

<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</t:htmlTag>

<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</t:htmlTag>
8
DRCB

別の複合コンポーネントを使用できます。 divやその他の追加タグはありません。必要なものだけです。この例を参照してください。

<table>
    <tr>...</tr>
    <my:cc rendered="false">
        <tr>...</tr>
    </my:cc>
    <my:cc rendered="true">
        <tr>...</tr>
    </my:cc>
</table>

そして、my：ccコンポーネント：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://xmlns.jcp.org/jsf/composite">

    <cc:interface>
    </cc:interface>

    <cc:implementation>
        <cc:insertChildren />
    </cc:implementation>
</html>

次のHTMLを生成します。追加のタグはまったくなく、ajaxで動作します。

<table><tr>...</tr><tr>...</tr></table>
0
Pavel Sedek