为什么我需要嵌套一个带有 render="#{some}" 的组件?当我想对它进行 ajax 更新时在另一个组件中? [英] Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

问题描述

所以我找到了一些接近于此的答案，并且找到了足以解决我遇到的问题的答案.但即便如此，我还是很好奇了解周围的工作原理.让我用一个例子来说明:

So I've found a few answers close to this, and I've found enough to fix the problem I had. But even so, I'm curious as to understand the workings around this. Let me illustrate with an example :

我有一个看起来像这样(缩短的)facelet .xhtml 页面.

I have a facelet .xhtml page that looks like this (shortned).

<h:form id="resultForm">

    <h:panelGroup class="search_form" layout="block">
        <h:inputText id="lastname" value="#{search.lastname}"/>
        <h:commandButton action="#{search.find}" value="Find">
            <f:ajax execute="lastname" render="resultDisplay"/>
        </h:commandButton>
    </h:panelGroup>

    <h:dataTable value="#{search.searchResults}" var="results" id="resultDisplay"
            rendered="#{!empty search.searchResults}">  
        <h:column>
            #{results.field}
        </h:column>
    </h:dataTable>

</h:form>

现在，为了简洁起见，我不会发布所有的支持 bean 代码，但我有这样的东西:

Now, for the sake of breivity, I will not post all the backing bean code, but I have something of this sort :

public void find() {
    searchResults = setResults(true);
}

其中 searchResults 是 ArrayList.搜索后，它不为空 - 在多个测试中检查(可以为空，但不在我正在做的测试中).

Where searchResults is an ArrayList<Objects>. After a search, it is not null - checked in multiple tests (can be null, but not in the testing I am doing).

现在.这不起作用.

但是如果我将 dataTable 嵌套在另一个中，比如说 panelGroup，它会起作用.

But if I nest the dataTable inside another, let's say panelGroup, it will work.

<h:panelGroup id="resultDisplay">
    <h:dataTable value="#{search.searchResults}" var="results"
        rendered="#{!empty search.searchResults}">  
        <h:column>
            #{results.field}
        </h:column>
    </h:dataTable>
</h:panelGroup>

现在，此更改使一切正常.我可以接受这个……但我想我也在寻求一些理解.关于为什么我必须嵌套这些组件的任何见解?我肯定错过了什么！

Now, this changes allows everything to work fine. I'd be okay with this... but I guess I am seeking a bit of understanding as well. Any insight as to why I have to nest these components? I am surely missing something!

推荐答案

Ajax 更新在客户端由 JavaScript 语言执行.JavaScript 可以访问的只是 HTML DOM 树.如果 JSF 不向 HTML 输出呈现任何组件，则 HTML DOM 树中没有任何内容可以在 Ajax 更新时通过 JavaScript 获取.JavaScript 无法通过其 ID 获取所需元素.

Ajax updating is performed by JavaScript language in the client side. All which JavaScript has access to is the HTML DOM tree. If JSF does not render any component to the HTML output, then there's nothing in the HTML DOM tree which can be obtained by JavaScript upon Ajax update. JavaScript cannot get the desired element by its ID.

它只有在您将有条件的 JSF 渲染组件包装在另一个组件中时才有效，该组件总是渲染到 HTML 输出，因此总是出现在 HTML DOM 树中因此总是可以通过 JavaScript 获取.在 ajax 渲染/更新期间引用该包装器组件.

It will only work if you wrap the conditionally JSF-rendered component in another component which is always rendered to the HTML output and thus always present in the HTML DOM tree and thus always obtainable by JavaScript. Reference that wrapper component instead during ajax render/update.

• JSF2 中的通信 - 内容的 Ajax 渲染本身有条件地呈现

这篇关于为什么我需要嵌套一个带有 render="#{some}" 的组件?当我想对它进行 ajax 更新时在另一个组件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！