如何根据javascript中的值在ui:repeat中呈现h:panelGroup？

Question

我将布尔值放入<h:inputText>中，但找不到方法将其放入<h:panelGroup>的rendered-attribute中。我也看不到使用bean值的方法，因为每个迭代本身都需要一个bean值。

这是我的jsf代码：

<ui:repeat var="item" value="#{itemBean.items}" id="iterateItems" varStatus="iteration">
    <script type="text/javascript">         
        showItem("#{item.id}","#{iteration.index}");
    </script>
    <h:inputText id="rendered"/>
    <h:panelGroup layout="block" rendered="???">
        Iteration #{iteration.index} rendered
    </h:panelGroup>
</ui:repeat>

这是我的javascript：

function showItem(item,iteration){
    if((clientSideValue==something){
        document.getElementById("iterateItems"+":"+iteration+":"+"rendered").value = true;
    }
    else{
        document.getElementById("iterateItems"+":"+iteration+":"+"rendered").value = false;
    }
}

Answer 1

JavaScript在客户端运行，并在从服务器端检索的HTML DOM树上工作(在您的特定情况下是由JSF生成的)。因此，JavaScript期望您想要显示/隐藏的所需的HTML元素是，并且总是出现在HTML DOM树中。

JSF在服务器端运行，并基于JSF组件树(“视图”)生成HTML代码。当JSF组件的rendered属性计算结果为false时，将不会为给定组件生成任何HTML代码，因此HTML DOM树中将没有任何内容，因此JavaScript的document.getElementById()将无法选择任何内容。

您认为这将是解决方案的具体功能需求是不清楚的，因此很难为您的具体问题提出正确的解决方案。但是如果你绝对肯定显示/隐藏需要在客户端(由JavaScript)而不是服务器端(由JSF)执行，那么你应该使用CSS的display属性，你可以在block和none之间切换。

这里是一个基本的启动示例，假设您最初想要隐藏它：

<ui:repeat var="item" value="#{itemBean.items}" id="iterateItems" varStatus="iteration">
    <script type="text/javascript">         
        showItem(#{iteration.index});
    </script>
    <h:inputText id="rendered" />
    <div id="foo#{iteration.index}" style="display:none">
        Iteration #{iteration.index} shown
    </div>
</ui:repeat>

使用

function showItem(index) {
    var div = document.getElementById("foo" + index);

    if (someCondition) {
        div.style.display = "block"; // Show it.
    } else {
        div.style.display = "none"; // Hide it.
    }
}

Answer 2

不要把服务器端脚本和客户端脚本混在一起！

只需根据需要使用EL即可：

<ui:repeat var="item" value="#{itemBean.items}" id="iterateItems" varStatus="iteration">
    <h:panelGroup layout="block" rendered="#{item.id le 1}">
        Iteration #{iteration.index} rendered
    </h:panelGroup>
</ui:repeat>

Answer 3

这是不可能的: JSF-Tags尤其是呈现属性是在JSF的RenderResponse阶段使用的。生成最终的超文本标记语言后，将不再有rendered属性-包含该属性的超文本标记语言元素要么被呈现，要么不被呈现。

因此，如果您需要根据客户端值执行某些操作，则需要将该值传输到服务器。

一种解决方法是设置css属性display:none。但请注意，这不会显示元素。它仍然在Page Source中可用。

如果你正在使用Javascript，你真的应该看看最终的源码。JSF标记被解析，甚至像23:58:23这样的自动生成的ID对于某个元素也不总是相同的。