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

Question

我正在尝试根据条目的数量动态地生成div标记，这些条目包含在来自后台bean的'deviceSel'中。对于每个div标记，我通过调用JS文件"Reports_Cap"中存在的"generateSparkLine"函数来填充它。我需要传递iv标签的id，以便在相应的'div'标签中填充数据。

在我当前的代码中，div使用相同的id创建，因此，在click上填充相同的部分。有人能帮我用一种方法动态地分配id从JSF文件的div标签?此外，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组件中使用它。