Ana*_*oly 2 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"){
var variables = {};
}
(function(){
variables.formid = '#{cc.clientId}';
})();
</script>
</div>
variables.formid我在helper.js文件中使用的价值.当我只包含一次这个复合组件时,它就像它应该的那样工作.当我包含多个复合组件时,每个组件都会收到最后包含的复合组件的值,如何解决此问题？
基本上有两种方式.
添加一种"注册"功能helper.js,以便您可以在那里明确注册,而不是让它搜索复合.
<h:outputScript name="js/helper.js" target="head" />
<div id="#{cc.clientId}">
...
</div>
<h:outputScript>helper.register("#{cc.clientId}", { foo: "somevalue" });</h:outputScript>
可以通过JS对象作为参数提供选项.这也是ao PrimeFaces如何使用PrimeFaces.cw()函数,其中"小部件名称"也作为选项传递.
为复合赋予一个独特的样式类,如下所示:
<h:outputScript name="js/helper.js" target="head" />
<div id="#{cc.clientId}" class="your-foo-composite">
...
</div>
这样,helper.js在文档就绪期间,可以通过类名收集它们.
// Vanilla JS:
var yourFooComposites = document.getElementsByClassName("your-foo-composite");
// Or if you happen to use jQuery:
var $yourFooComposites = $(".your-foo-composite");
选项可以作为HTML5数据属性提供(目前浏览器支持很好).
<div id="#{cc.clientId}" class="your-foo-composite" data-foo="somevalue">
哪个可以获得:
// 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");
// ...
});
它还使您的HTML输出不受内联脚本的影响.
与具体问题无关,使用"js"作为初始代码中的库名称并不好.仔细阅读什么是JSF资源库以及如何使用它？还要注意我添加了target="head"属性<h:outputScript>.如果你正确使用JSF <h:head>组件,它将让JSF自动将脚本定位到生成的HTML <head>元素.