Integrare JavaScript JSF componente composito, il modo pulito

Question

In JSF, quale sarebbe il modo "giusto" e "pulito" per integrare JavaScript vale a dire in un composito compenent? Io sono un fan di Unobtrusive JavaScript, e separando HTML da JS da CSS. Quale sarebbe un buon modo per avere il più piccolo capriccio possibile? Questo è quello che mi piace il migliore finora:

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

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

Quello che non mi piace è, da usare per generare language Alanguage B. Fondamentalmente lo stesso vale per i gestori di eventi e cose del genere. Il mio preferito sarebbe quello di collegare questi gestori via <insert favorite DOM JavaScript library here>. È possibile? Come fai questo tipo di integrazione?

Answer 1

Direi che quello che hai è il meglio che puoi ottenere, a patto che tu sia assolutamente positivo che la natura dell'elemento HTML sia così unica che devi assolutamente selezionarla con un ID, ogni volta ancora .

Se la rappresentazione HTML non è che unico (posso immaginare che un modello di Facelets o includere file potrebbe contenere elementi HTML applicazione univoca a livello di come intestazione, menu, piè di pagina, ecc, ma un componente composito che può essere riutilizzato più volte in una singola vista? non posso per la vita immaginare che), allora si potrebbe anche considerare l'utilizzo di un nome di classe e di inizializzazione gancio unico su di esso.

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> 

con in /resources/composites/yourComposite.js (supponendo che si sta utilizzando jQuery)

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

È possibile se necessario, estratto l'ID generato automaticamente elemento HTML per ciascuna di esse in un jQuery.each():

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