ui : repeat?에서 javascript의 getElementById를 사용하는 방법?

Question

<ui:repeat>으로 항목 목록을 반복합니다. 내부 자바 스크립트를 사용하여 각 반복에 대한 일부 데이터를 처리하고 모든 반복에 대해 생성 된 div에 출력하고 싶습니다. 다음 코드는 물론 마지막 반복 (이전의 것들은 덮어 쓰기)에 대해서만 데이터를 출력합니다. 나는 그것을하는 방법에 대해 생각할 수 없다.

이는 JSF 코드 :

<ui:repeat var="item" value="#{someBean.items}"> 
    <script type="text/javascript"> 
     var item = "#{item.id}"; 
     showItem(); 
    </script> 
    <div id="#{item.id}"></div> 
</ui:repeat> 

이 기능입니다 :

function showItem(){ 
    document.getElementById(item).innerHTML = 'this is an item'; 
} 

Answer 1

이 일을보십시오 :

<ui:repeat var="item" value="#{someBean.items}"> 
    <div id="#{item.id}"></div> 
    <script type="text/javascript"> 
     showItem("#{item.id}"); 
    </script> 
</ui:repeat> 

-

function showItem(item){ 
    document.getElementById(item).innerHTML = 'this is an item'; 
} 

,369을

그 이유는 각 var가 스크립트 태그에 래핑 되더라도 모든 전역 범위에 있으므로 루프의 각 반복마다 서로를 작성하기 때문입니다.

<ui:repeat var="item" value="#{someBean.items}"> 
    <div id="#{item.id}"></div> 
    <script type="text/javascript"> 
    (function(){ 
     var item = "#{item.id}"; 
     showItem(item); 
    })(); 
    </script> 
</ui:repeat> 

Answer 2

:

는 자신의 범위의이 같은 기능을 실행 자체에 바르 포장 할 수 있지만,이 잔인한 약간 것처럼 현재의 논리로 보인다 각 스크립트 블록을 부여하려면 "getElementsByName"을 사용하여 모든 항목을 가져 와서 루프에 표시 할 수 있습니다. 원인의 다른 방법으로는 "getElementsByClassName"또는 jQuery가 있습니다.

<ui:repeat id="outer" var="item" value="#{someBean.items}"> 
    <div id="#{item.id}" name="item"></div> 
</ui:repeat> 

<script type="text/javascript"> 
function showAllItems(){ 
    var items = document.getElementsByName('item'); 
    for(var index in items) 
    { 
     showItem(items[index].id); 
    } 
}; 
showAllItems(); 
</script>