如何有条件地呈现普通的HTML元素,例如< div>? [英] How to conditionally render plain HTML elements like <div>s?

查看:202
本文介绍了如何有条件地呈现普通的HTML元素,例如< div>?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图实现一个复合组件,它可以以纯文本的形式显示用户的信息细节,或者在需要的细节是当前连接的用户的细节时通过可编辑的输入文本字段显示。

I'm trying to implement a composite component which either displays the information details of a user in plain text or displays them through editable input texts fields if the desired details are those of the user currently connected.

我知道al UI组件可以通过呈现属性呈现,但那些不是UI组件的属性(例如div)

I know that al UI Components can be rendered via the rendered attribute but what about the ones which are not UI Components (for example divs)

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</div>

<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</div>

我知道div没有渲染的属性,可能我没有右键右移根本就没有办法。我很容易使用JSTL标签,但我想避免这种情况。

I know that the div doesn't have the rendered attribute and probably I'm not taknig the right approach at all. I could very easily use an JSTL tag but I want to avoid that.

推荐答案

<h:panelGroup layout="block" ... rendered="#{someCondition}">
    ...
</h:panelGroup>

或者,将它包装在< ui:fragment> $ b

Alternatively, wrap it in an <ui:fragment>:

<ui:fragment rendered="#{someCondition}">
    <div>
        ...
    </div>
</ui:fragment>

请注意,当您想要ajax更新有条件渲染的组件时,您应该而不是更新其父组件。

Do note that when you'd like to ajax-update a conditionally rendered component, then you should be ajax-updating its parent component instead.

  • Alternative to ui:fragment in JSF
  • Conditional rendering of non-JSF components (plain vanilla HTML and template text)
  • Ajax update/render does not work on a component which has rendered attribute
  • Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

这篇关于如何有条件地呈现普通的HTML元素,例如&lt; div&gt;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆