javascript - 如何渲染 h :panelGroup inside ui:repeat based on value from javascript?

Question

我将 bool 值输入 <h:inputText>但我找不到将其放入 rendered 的方法-<h:panelGroup> 的属性.我也没有看到使用 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 组件树(“ View ”)生成 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.
    }
}