如何更新ui:repeat并保留组件ID？表单复制后ID不符问题

我来帮你捋清楚这个问题，顺便给你一套可行的解决思路：

为什么表单ID不符合预期？ #

首先要明确：<ui:repeat>是渲染时组件，它不会在视图构建阶段生成独立的组件树节点，而是在渲染阶段重复复用同一个组件实例。当你点击按钮添加新item后，虽然bean.items里多了数据，但JSF的组件树在视图构建后已经固定——新添加的表单其实是复用了原有组件的模板，这就容易导致ID生成逻辑出现偏差。另外，如果你的新item没有分配唯一且连续的id值，也会出现ID重复或者混乱的情况。

正确更新<ui:repeat>并保留组件ID的步骤 #

1. 确保Bean使用视图作用域 #

视图作用域（@ViewScoped）是处理这种动态UI场景的最佳选择，它能在整个视图生命周期内保存bean的状态，避免每次请求重新初始化，保证<ui:repeat>能正确读取最新的items列表。

示例Bean代码：

@ViewScoped
@ManagedBean
public class Bean implements Serializable {
    private List<Item> items = new ArrayList<>();
    private long nextItemId = 1;

    // 初始化第一个表单
    public Bean() {
        items.add(new Item(nextItemId++));
    }

    // 添加新表单的方法
    public void cloneForm(ActionEvent event) {
        // 给新item分配唯一ID，避免重复
        items.add(new Item(nextItemId++));
    }

    // Getter & Setter
    public List<Item> getItems() {
        return items;
    }

    public void setItems(List<Item> items) {
        this.items = items;
    }
}

// Item实体类
public class Item implements Serializable {
    private long id;

    public Item(long id) {
        this.id = id;
    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }
}

2. 调整页面代码，确保ID生成逻辑正确 #

你的页面代码框架没问题，但要注意JSF的命名容器规则：最终生成的客户端ID会包含父容器的ID（比如idUpdate）和<ui:repeat>的循环索引，比如idUpdate:0:formId-1，这是JSF为了避免全局ID冲突的正常机制。如果你的“预期ID”是指服务器端组件ID，那formId-#{item.id}是正确的，只要item的id唯一，服务器端ID就会符合预期。

页面代码可以保持原样，只要确保<o:form>依赖的item.id是唯一的：

<p:outputPanel id="idUpdate">
    <ui:repeat value="#{bean.items}" var="item">
        <o:form id="formId-#{item.id}">
            <p:inputText id="txtSearch-#{item.id}" placeholder="Search #{item.id}"/>
            <!-- 其他表单组件 -->
        </o:form>
    </ui:repeat>
</p:outputPanel>

<o:form id="formHandle">
    <p:commandButton value="Add Form" actionListener="#{bean.cloneForm}" update="idUpdate"/>
</o:form>

3. 解决组件树不更新的问题 #

如果遇到更新后新表单没显示或者ID还是不对的情况，可以尝试：

• 确保items列表是可修改的集合（比如用ArrayList，不要用不可变的Collections.unmodifiableList）
• 若真需要强制触发视图更新，可在cloneForm方法中添加：

  FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add("idUpdate");
  

关于客户端ID的额外说明 #

如果你期望客户端ID直接是formId-1而不带父容器前缀，那可以考虑用<c:forEach>代替<ui:repeat>——但<c:forEach>是视图构建时组件，动态添加item后需要重新构建视图，这时候需要在cloneForm方法中添加导航代码：

public void cloneForm(ActionEvent event) {
    items.add(new Item(nextItemId++));
    // 重新导航到当前视图，触发视图重构
    FacesContext.getCurrentInstance().getViewRoot().setViewId(FacesContext.getCurrentInstance().getViewRoot().getViewId());
}

不过这种方式会重置视图中的临时状态（比如输入框的内容），所以除非特殊需求，还是推荐用<ui:repeat>+视图作用域的方案。

内容的提问来源于stack exchange，提问作者Trương Huy