Question

我有以下问题：

在我的数据模型中，我有一个名为 Type 的类。类型由标题和说明组成。

现在我有一个下拉框，用户可以在其中选择 Type 的实例：

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

在下拉框下方是一个div区域，我想在其中显示所选类型的描述。

我的问题如下：

如何在javascript中存储 Type 实例的描述？迭代列表的简单JSF标记可以完成这项工作，但不幸的是我不知道。它们都打印其他HTML标记（如datatable），或仅与周围的JSF标记（如selectItems）一起使用。

我知道我可以使用AJAX推送解决我的问题，但我不想这样做。我想在javascript中访问我的页面加载数据。

我希望你能帮助我！谢谢，迈克尔

Answer 1

以JSON格式准备数据，让JSF将其打印为JS变量。你可以直接在支持bean

中

public String getTypesAsJson() {
    return typesAsJson;
}

与

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

视图中的

或，通过遍历Java集合（如List<Type>）并相应地打印JavaScript代码，如果值保证不包含JS中的任何特殊字符（如引号和换行符）：

<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来将Java的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];
    // ...
}

根据下拉框中的选择在网站上显示数据

1 个答案: