Различные идентификаторы тегов div с помощью <ui: repeat>

Question

Я пытаюсь динамически генерировать теги div в зависимости от количества элементов, содержащихся в 'deviceSel' из компонентов поддержки. Для каждого тега div я заполняю его, вызывая функцию generateSparkLine, присутствующую в файле JS - Reports_Cap. Мне нужно передать идентификатор тега iv для функции, чтобы заполнить данные в соответствующем теге 'div'.

В моем текущем коде элементы div создаются с одинаковым идентификатором, и, следовательно, одна и та же часть заполняется при нажатии Может ли кто-нибудь помочь мне с способом динамического назначения идентификаторов тегам div из файла JSF? Кроме того, тег 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="Reports_Cap.generateSparkLine(this, 'generateSparkLine')"

Таким образом, вам не нужен идентификатор.У вас уже есть элемент в качестве 1-го аргумента в функции.

---

или , если он не находится под вашим контролем и / или вы не используете его для получения элемента по идентификатору и вы используете Facelets 2.x, затем введите счетчик циклов по атрибуту varStatus, равный <ui:repeat>, и добавьте к нему значения 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 компоненте.