如何使同一个JSF复合组件多次包含以拥有自己的javascript范围？_Javascript_Jsf_Composite Component

如何使同一个JSF复合组件多次包含以拥有自己的javascript范围？

javascript jsf

如何使同一个JSF复合组件多次包含以拥有自己的javascript范围？,javascript,jsf,composite-component,Javascript,Jsf,Composite Component,我有一个JSF复合组件，如下所示： <cc:implementation> <div id="#{cc.clientId}"> <h:outputScript library="js" name="helper.js"/> <script type="text/javascript"> if(typeof variables === "undefined"){ va

我有一个JSF复合组件，如下所示：

 <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>


如果（变量类型==“未定义”）{
var变量={}；
}
（功能（）{
variables.formid='#{cc.clientId}'；
})();

我在

helper.js

文件中使用的

variables.formid

的值。当我只包含这个复合组件一次时，它就正常工作了。当我包含多个复合组件时，每个组件都会收到最后包含的复合组件的值，我如何解决这个问题？

基本上有两种方法

向

helper.js

添加一种“register”函数，这样您就可以在那里显式注册它，而不是让它搜索组合

<h:outputScript name="js/helper.js" target="head" />
<div id="#{cc.clientId}">
    ...
</div>
<h:outputScript>helper.register("#{cc.clientId}", { foo: "somevalue" });</h:outputScript>

这样，

helper.js

就可以在文档准备过程中按类名收集它们

// Vanilla JS:
var yourFooComposites = document.getElementsByClassName("your-foo-composite");

// Or if you happen to use jQuery:
var $yourFooComposites = $(".your-foo-composite");

选项可以提供为（）

可通过以下方式获得：

// 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");
    // ...
});

//香草JS:
对于（var i=0；i<0.length；i++）{
var yourFooComposite=yourFooComposites[i]；
var clientId=yourFooComposite.id；
var dataFoo=yourFooComposite.dataset.foo；
// ...
}
//或者，如果您碰巧使用jQuery：
$yourFooComposites.each（函数（索引，yourFooComposite）{
var$yourFooComposite=$（yourFooComposite）；
var clientId=$yourFooComposite.attr（“id”）；
var dataFoo=$yourFooComposite.data（“foo”）；
// ...
});

它还使您的HTML输出不受内联脚本的影响

与具体问题无关在初始代码中使用“js”作为库名是不好的。请仔细阅读并注意，我在

中添加了

target=“head”

属性。如果您正确地使用了JSF

组件，它将允许JSF自动将脚本重新链接到生成的HTML

元素。