带有 <ui:repeat> 的不同 div 标签 ID

Question

我正在尝试根据支持 bean 的“deviceSel”中包含的项目数量动态生成 div 标签。对于每个 div 标签，我通过调用 JS 文件中的“generateSparkLine”函数来填充它 - “Reports_Cap”。我需要传递 iv 标签的 id 以便函数在相应的“div”标签中填充数据。

在我当前的代码中，div 使用相同的 id 创建，因此，相同的部分会在点击时填充。有人可以帮助我从 JSF 文件中为 div 标签动态分配 id 吗？此外，div 标签不允许我使用“onload”事件，这就是我使用“onclick”的原因。我该如何修改它，以便在页面打开时填充 div 标签？

<div>
    <ui:repeat var="deviceSel" value="#{reportViewproto.selectedDevices}">
        <h:outputText value="#{deviceSel}" />
        <div id="chartDiv" style="width:600px; height:400px;" onclick="Reports_Cap.generateSparkLine('chartDiv', 'generateSparkLine')"></div>
        <br />
   </ui:repeat>
</div>

Answer 1

几种方法。

如果 JS generateSparkLine() 函数在您的控制之下，并且您实际上使用 id 通过 ID 从文档中获取元素，那么只需去掉 id 属性并将onclick替换为

onclick="Reports_Cap.generateSparkLine(this, 'generateSparkLine')"

这样您就不需要 ID。您已经将该元素作为函数中的第一个参数。

---

或者如果它不在您的控制之下和/或您不使用它来通过 ID 获取元素并且您正在使用 Facelets 2.x，然后通过<ui:repeat> 的varStatus 属性引入循环计数器，并为其添加ID 值的后缀。

<div>
    <ui:repeat var="deviceSel" value="#{reportViewproto.selectedDevices}" varStatus="loop">
        <h:outputText value="#{deviceSel}" />
        <div id="chartDiv_#{loop.index}" style="width:600px; height:400px;" onclick="Reports_Cap.generateSparkLine('chartDiv_#{loop.index}', 'generateSparkLine')"></div>
        <br />
   </ui:repeat>
</div>

如果您仍在使用 Facelets 1.x，最好的选择是 JSTL <c:forEach>，它也以相同的方式支持 varStatus 属性，唯一的区别是它在视图构建期间运行，而不是在视图渲染期间运行因此您将无法在另一个 UIData 组件中使用它。