Integre JavaScript en el componente compuesto JSF, la forma limpia

En JSF, ¿cuál sería la forma "correcta" y "limpia" de integrar JavaScript, es decir, en un compeneto compuesto? Soy un fan de Unobtrusive JavaScript y separa HTML de JS de CSS. ¿Cuál sería una buena manera de tener las menores peculiaridades posibles? Esto es lo que me gusta el mejor hasta ahora:Integre JavaScript en el componente compuesto JSF, la forma limpia

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

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

Lo que no me gusta es, de usar para generar language Alanguage B. Básicamente, lo mismo ocurre con los controladores de eventos y esas cosas. Mi favorito sería adjuntar esos controladores a través del <insert favorite DOM JavaScript library here>. es posible? ¿Cómo se hace este tipo de integración?

Fuente

2012-09-27 Bruno Schäpper

No estoy seguro de entender su problema/pregunta concreta. Puedes usar, por ejemplo, jQuery. Las bibliotecas de componentes JSF populares como PrimeFaces y RichFaces también usan jQuery bajo las cubiertas. – BalusC

Sí, por supuesto. Pero de alguna manera tengo que recuperar una referencia a ese elemento DOM. Usar una identificación sería la única manera de asegurarse de que sea única (para eso es una identificación, después de todo). Ahora no quiero generar algún fragmento de JavaScript, pero ¿cómo obtengo un nodo DOM entonces? –

Yo diría que lo que tienes allí es lo mejor que puedes obtener, siempre que estés absolutamente seguro de que la naturaleza del elemento HTML es tan única que necesitas seleccionarlo por ID, cada vez que lo desees. .

Si la representación HTML no es que único (que puede imaginar que una plantilla Facelets o incluir el archivo podría contener elementos HTML de aplicación en todo el singular como el encabezado, menú, pie de página, etc, pero un componente compuesto que puede ser reutilizado varias veces en una sola vista? No puedo imaginarlo de por vida), entonces también podrías considerar usar un nombre de clase único y enganchar la inicialización en él.

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 la /resources/composites/yourComposite.js (asumiendo que está usando jQuery)

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

Usted puede si es necesario extracto de la ID de elemento HTML autogenerado para cada uno de ellos en un jQuery.each():

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

Fuente

2012-09-27 17:53:25 BalusC

Gracias por su aporte. Tienes razón, la mayoría de las partes no serán únicas y ni siquiera importa si son (por ejemplo, encabezado, menú, pie de página). Pero mi dolor de cabeza comienza cuando recargo o inserto componentes a través de AJAX. No puedo, y no quiero, reiniciar todos los componentes que tengan un determinado nombre de clase. Las alternativas simples serían una identificación única o establecer una bandera para recordar qué componentes se inicializaron antes. Este último requiere un código, se siente sucio, no es realmente seguro y agrega un poco de sobrecarga. ¿Cómo resolviste este tipo de problema? –

Integre JavaScript en el componente compuesto JSF, la forma limpia

Respuesta

Cuestiones relacionadas