2

次の問題があります。

私のデータ モデルには、Typeというクラスがあります。タイプは、タイトルと説明で構成されます。

これで、ユーザーがTypeのインスタンスを選択できるドロップダウン ボックスができました。

<h:selectOneMenu id="typeDropdown" onchange="displayDescription();">
      <f:selectItems value="#{operationCreator.types.title}" />
</h:selectOneMenu>

ドロップダウン ボックスの下には、選択したタイプの説明を表示する div 領域があります。

私の質問は次のとおりです。

Typeインスタンスの説明を JavaScript に保存するにはどうすればよいですか? リストを繰り返し処理する単純な JSF タグで十分ですが、残念ながら私は何も知りません。それらはすべて、追加の HTML タグ (datatable など) を出力するか、周囲の JSF タグ (selectItems など) でのみ機能します。

AJAX プッシュを使用して問題を解決できることはわかっていますが、そうしたくありません。JavaScript でページの読み込み時にデータにアクセスしたい。

あなたが私を助けてくれることを願っています！ありがとう、マイケル

4

1 に答える 1

7

データを JSON 形式で準備し、JSF に JS 変数として出力させるだけです。バッキングBeanで直接行うことができます

public String getTypesAsJson() {
    return typesAsJson;
}

と

<script>
    var types = #{bean.typesAsJson};
</script>

または、値に引用符や改行などの JS の特殊文字が含まれていないことが保証されている場合は、Java コレクションのような Java コレクションを反復処理し、List<Type>それに応じて JavaScript コードを出力することにより、ビュー内で:

<script>
    var types = {
        <ui:repeat value="#{bean.types}" var="type" varStatus="loop">
            "#{type.title}": "#{type.description}"#{!loop.last ? "," : ""}
        </ui:repeat>
    };
</script>

最初の方法は、型のタイトルまたは説明に JS 特殊文字が含まれている場合に、生成された JS コードで構文エラーが発生するリスクを排除するため、推奨されます。とりわけGoogle Gsonを使用して、Bean の Java コレクションを有効な JSON 形式の文字列に変換できます。

typesAsJson = new Gson().toJson(types);

ここで、ドロップダウン リストのアイテム値がタイプ タイトルであることを確認すると、次のように関連する説明を取得できます。

<h:selectOneMenu ... onchange="displayDescription(this)">

と

function displayDescription(dropdown) {
    var title = dropdown.options[dropdown.selectedIndex].value;
    var description = types[title];
    // ...
}
于 2012-05-15T16:48:50.470 に答える