Zintegruj JavaScript w komponentach JSF, czysty sposób.

Question

Jaki byłby "właściwy" i "czysty" sposób zintegrowania JavaScriptu z komponentem kompozytowym w JSF? Jestem fanem Unobtrusive JavaScript i oddzielania HTML od JS od CSS. Jaki byłby dobry sposób na uzyskanie tak małych dziwactw, jak to tylko możliwe? To jest to, co lubię najlepszy do tej pory:

<composite:interface> 
    // ... 
</composite:interface> 

<composite:implementation> 
    // ... 
    <script> initSomething('#{cc.clientId}'); </script> 
</composite:implementation>  

Co mi się nie podoba to, aby używać language A wygenerować language B. Zasadniczo to samo dotyczy programów obsługi zdarzeń i innych rzeczy. Moim faworytem byłoby dołączenie tych modułów obsługi za pomocą <insert favorite DOM JavaScript library here>. czy to możliwe? Jak robisz tego rodzaju integrację?

Answer 1

Powiedziałbym, że to, co tam masz, jest najlepsze, pod warunkiem, że masz absolutną pewność, że natura elementu HTML jest tak wyjątkowa, że ​​musisz koniecznie wybrać ją za pomocą ID, za każdym razem ponownie .

Jeśli reprezentacja HTML nie jest że unikatowe (mogę sobie wyobrazić, że szablon Facelets lub zawierać plik może zawierać elementy HTML aplikacji szeroki wyjątkowy jak nagłówek, menu, stopki, itp, ale komponent kompozytu, które mogą być ponownie wykorzystane wiele razy w jednym widoku - nie mogę tego sobie wyobrazić), wtedy możesz również rozważyć użycie unikalnej nazwy klasy i inicjalizacji haka.

E.g. /resources/composites/yourComposite.xhtml

<cc:implementation> 
    <h:outputScript library="composites" name="yourComposite.js" target="head" /> 
    <div id="#{cc.clientId}" class="your-composite"> 
     ... 
    </div> 
</cc:implementation> 

zw /resources/composites/yourComposite.js (zakładając że używasz jQuery)

var $yourComposites = $(".your-composite"); 
// ... 

Można w razie potrzeby wyodrębnić element HTML wygenerowany automatycznie identyfikator dla każdego z nich w jQuery.each():

$yourComposites.each(function(index, yourComposite) { 
    var id = yourComposite.id; 
    // ... 
});