tipos - ¿Cómo hacer que el mismo componente compuesto JSF se incluya varias veces para tener su propio alcance de JavaScript?
tablas en javascript ejemplos (1)
Tengo un componente compuesto JSF como este:
<cc:implementation>
<div id="#{cc.clientId}">
<h:outputScript library="js" name="helper.js"/>
<script type="text/javascript">
if(typeof variables === "undefined"){
var variables = {};
}
(function(){
variables.formid = ''#{cc.clientId}'';
})();
</script>
</div>
Valor de variables.formid que estoy usando en un archivo helper.js Cuando incluyo este componente compuesto solo una vez, funciona como debería. Cuando incluyo múltiples componentes compuestos, cada componente recibe el valor de un último componente compuesto incluido, ¿cómo puedo resolver este problema?
Básicamente hay 2 formas.
Agregue el tipo de función de "registro" a
helper.js, para que pueda registrarlo explícitamente allí, en lugar de dejar que busque compuestos.<h:outputScript name="js/helper.js" target="head" /> <div id="#{cc.clientId}"> ... </div> <h:outputScript>helper.register("#{cc.clientId}", { foo: "somevalue" });</h:outputScript>Las opciones se pueden proporcionar a través de un objeto JS como argumento. Esta es también la forma en que PrimeFaces funciona con la función
PrimeFaces.cw(), por lo que el "nombre del widget" también se pasa como una opción.Dale al compuesto una clase de estilo única como esta:
<h:outputScript name="js/helper.js" target="head" /> <div id="#{cc.clientId}" class="your-foo-composite"> ... </div>De esta forma, el
helper.jssolo puede recopilarlos por nombre de clase durante lahelper.jsdocumento.// Vanilla JS: var yourFooComposites = document.getElementsByClassName("your-foo-composite"); // Or if you happen to use jQuery: var $yourFooComposites = $(".your-foo-composite");Las opciones se pueden proporcionar como atributos de datos HTML5 (la compatibilidad con el navegador es buena actualmente ).
<div id="#{cc.clientId}" class="your-foo-composite" data-foo="somevalue">Que se puede obtener como:
// Vanilla JS: for (var i = 0; i < yourFooComposites.length; i++) { var yourFooComposite = yourFooComposites[i]; var clientId = yourFooComposite.id; var dataFoo = yourFooComposite.dataset.foo; // ... } // Or if you happen to use jQuery: $yourFooComposites.each(function(index, yourFooComposite) { var $yourFooComposite = $(yourFooComposite); var clientId = $yourFooComposite.attr("id"); var dataFoo = $yourFooComposite.data("foo"); // ... });También mantiene su salida HTML libre de scripts en línea.
Sin relación con el problema concreto, el uso de "js" como nombre de biblioteca como en su código inicial no es bueno. Lea detenidamente ¿Para qué sirve la biblioteca de recursos JSF y cómo se debe usar? También tenga en cuenta que agregué target="head" atributo target="head" al <h:outputScript> . En caso de que esté utilizando adecuadamente el componente JSF <h:head> , permitirá a JSF reubicar automáticamente el script al elemento HTML <head> generado.