複合コンポーネントの動的リストに基づいて複数の<option>要素をレンダリングします

ガヴィ

Prime Faces5.3でJSF2.2を使用しています。

動的オプションを使用してhtml5コンポーネントを作成しようとしています。目標は、f:selectItemsタグに似たものを作成することです

現時点では、datalistタグの次のコード(datalist.xhtmlファイル)があります

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns:cc="http://xmlns.jcp.org/jsf/composite">

<cc:interface></cc:interface>

<cc:implementation>
    <datalist id="#{cc.attrs.id}">
        <cc:insertChildren/>
    </datalist>
</cc:implementation>

</html>

単一のオプション(option.xhtmlファイル)の場合は次のとおりです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns:cc="http://xmlns.jcp.org/jsf/composite">

<cc:interface>
    <cc:attribute name="value" type="java.lang.String" default=""/>
    <cc:attribute name="label" type="java.lang.String" default=""/>
</cc:interface>

<cc:implementation>
    <option value="#{cc.attrs.value}" label="#{cc.attrs.label}"/>
</cc:implementation>

</html>

このアプローチで私はこのようなものを作成することができます

<myTag:dataList id="test">
    <myTag:option value="1" label="label1"/>
    <myTag:option value="2" label="label2"/>
    <myTag:option value="3" label="label3"/>
</myTag:dataList>

しかし、オプションの動的リストを作成できるものが必要です。私は次のコード(または同様のもの)を書くことを期待しています

<myTag:dataList id="test">
    <myTag:options value="#{myBean.myCollection}" var="mySingleObj" itemValue="mySingleObj.value" itemLabel="mySingleObj.label"/>
</myTag:dataList>

手伝って頂けますか?ありがとうございました!

BalusC

<ui:repeat>コレクションを反復処理するために使用できます。これが基本的な例です。

<ui:repeat value="#{bean.options}" var="option">
    <option value="#{option.value}">#{option.label}</option>
</ui:repeat>

var値式がvar属性で許可されていないため、コンポジットでそれ宣言するだけでは注意が必要です。したがって、のようなことはできませんvar="#{cc.attrs.var}"そのためには、バッキングコンポーネントを作成し、<ui:repeat>それにバインドし、postAddToViewイベント中に手動でvar属性を評価してコンポーネントに設定する必要があります。

<cc:interface componentType="optionsComposite">
    <cc:attribute name="value" />
    <cc:attribute name="var" />
    <cc:attribute name="itemValue" />
    <cc:attribute name="itemLabel" />
</cc:interface>
<cc:implementation>
    <f:event type="postAddToView" listener="#{cc.init}" />

    <ui:repeat binding="#{cc.repeat}" value="#{cc.attrs.value}">
        <option value="#{cc.attrs.itemValue}">#{cc.attrs.itemLabel}</option>
    </ui:repeat>
</cc:implementation>

componentType属性に注意してください<cc:interface>@FacesComponent値を参照する必要があります。

@FacesComponent("optionsComposite")
public class OptionsComposite extends UINamingContainer {

    private UIComponent repeat;

    public void init() {
        repeat.getAttributes().put("var", getAttributes().get("var"));
    }

    public UIComponent getRepeat() {
        return repeat;
    }

    public void setRepeat(UIComponent repeat) {
        this.repeat = repeat;
    }

}

これで、と同じように使用できます<f:selectItems>

<myTag:dataList id="test">
    <myTag:options value="#{myBean.myCollection}" var="mySingleObj" itemValue="#{mySingleObj.value}" itemLabel="#{mySingleObj.label}" />
</myTag:dataList>

参照:

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

データ属性に基づいて複数のコンポーネントをレンダリングする

分類Dev

.env構成変数に基づいて基本コンポーネントをレンダリングします

分類Dev

関数が返すものに基づいてコンポーネントをレンダリングする

分類Dev

Reactルーターパスは複数のコンポーネントをレンダリングします

分類Dev

Reactを使用して、特定の数のコンポーネントを動的にレンダリングします

分類Dev

Reactは、3つのロジックパスに基づいてさまざまなコンポーネントをレンダリングします

分類Dev

名前に基づいてReactコンポーネントをレンダリングします

分類Dev

関数型コンポーネントのデータに基づいて要素を条件付きでレンダリングする

分類Dev

パス内のパラメータに基づいてコンポーネントをレンダリングします

分類Dev

ユーザーの ID に基づいてコンポーネントをレンダリングする

分類Dev

React Native:モーダルでの状態値の変更に基づいて条件付きコンポーネントをレンダリングします

分類Dev

JestとEnzymeを使用して、ContextAPIデータに基づくコンポーネントの条件付きレンダリングをテストします

分類Dev

React:インポートされたコンポーネントのリストに基づいて連結されたコンポーネントをレンダリングします

分類Dev

小道具に基づいてコンポーネントを動的にレンダリングする

分類Dev

特定のページに基づいて、Gatsbyでコンポーネントを条件付きでどのようにレンダリングしますか?

分類Dev

オブジェクト内のデータに基づいてN回コンポーネントをレンダリングします

分類Dev

ポリマー:属性に基づいて、同じコンポーネントの複数のテンプレート?

分類Dev

他のファイルオプションに基づいて、reactコンポーネントをレンダリングします

分類Dev

受信したデータに基づいて、特定の順序でさまざまな子コンポーネントをレンダリングする

分類Dev

ReactNativeの条件に基づいて要素をレンダリングします

分類Dev

Reactコンポーネントのレンダリング関数でDOM要素を返します

分類Dev

React-同じクラスを使用して複数のコンポーネントをレンダリングします-不変の違反

分類Dev

インデックスマップに基づいてコンポーネントとクローズタグをレンダリングします

分類Dev

react-router v4を使用して、複数のコンポーネントが単一ルートにレンダリングされますか?

分類Dev

ジェスト酵素浅いテストは、Reactコンポーネントのすべての要素をレンダリングしていません

分類Dev

Vue.jsは、複数のコンポーネントに基づいて動的なAJAX応答を作成します

分類Dev

Pythonのリストと辞書に基づいて複数の列をコーディングする

分類Dev

'exact'を使用しているにもかかわらず、複数のコンポーネントをレンダリングするReact

分類Dev

テンプレートに基づいてリストの複数のリストをマージする

Related 関連記事

  1. 1

    データ属性に基づいて複数のコンポーネントをレンダリングする

  2. 2

    .env構成変数に基づいて基本コンポーネントをレンダリングします

  3. 3

    関数が返すものに基づいてコンポーネントをレンダリングする

  4. 4

    Reactルーターパスは複数のコンポーネントをレンダリングします

  5. 5

    Reactを使用して、特定の数のコンポーネントを動的にレンダリングします

  6. 6

    Reactは、3つのロジックパスに基づいてさまざまなコンポーネントをレンダリングします

  7. 7

    名前に基づいてReactコンポーネントをレンダリングします

  8. 8

    関数型コンポーネントのデータに基づいて要素を条件付きでレンダリングする

  9. 9

    パス内のパラメータに基づいてコンポーネントをレンダリングします

  10. 10

    ユーザーの ID に基づいてコンポーネントをレンダリングする

  11. 11

    React Native:モーダルでの状態値の変更に基づいて条件付きコンポーネントをレンダリングします

  12. 12

    JestとEnzymeを使用して、ContextAPIデータに基づくコンポーネントの条件付きレンダリングをテストします

  13. 13

    React:インポートされたコンポーネントのリストに基づいて連結されたコンポーネントをレンダリングします

  14. 14

    小道具に基づいてコンポーネントを動的にレンダリングする

  15. 15

    特定のページに基づいて、Gatsbyでコンポーネントを条件付きでどのようにレンダリングしますか?

  16. 16

    オブジェクト内のデータに基づいてN回コンポーネントをレンダリングします

  17. 17

    ポリマー:属性に基づいて、同じコンポーネントの複数のテンプレート?

  18. 18

    他のファイルオプションに基づいて、reactコンポーネントをレンダリングします

  19. 19

    受信したデータに基づいて、特定の順序でさまざまな子コンポーネントをレンダリングする

  20. 20

    ReactNativeの条件に基づいて要素をレンダリングします

  21. 21

    Reactコンポーネントのレンダリング関数でDOM要素を返します

  22. 22

    React-同じクラスを使用して複数のコンポーネントをレンダリングします-不変の違反

  23. 23

    インデックスマップに基づいてコンポーネントとクローズタグをレンダリングします

  24. 24

    react-router v4を使用して、複数のコンポーネントが単一ルートにレンダリングされますか?

  25. 25

    ジェスト酵素浅いテストは、Reactコンポーネントのすべての要素をレンダリングしていません

  26. 26

    Vue.jsは、複数のコンポーネントに基づいて動的なAJAX応答を作成します

  27. 27

    Pythonのリストと辞書に基づいて複数の列をコーディングする

  28. 28

    'exact'を使用しているにもかかわらず、複数のコンポーネントをレンダリングするReact

  29. 29

    テンプレートに基づいてリストの複数のリストをマージする

ホットタグ

アーカイブ