如何多次包含相同的JSF Composite Component以拥有自己的javascript范围？ [英] How to make same JSF Composite Component included multiple times to have its own javascript scope?
问题描述
我有一个这样的JSF复合组件：
I have a JSF composite component like this:
<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>
<$ c $的价值c> variables.formid 我在 helper.js 文件中使用。当我只包含一次这个复合组件时，它就像它应该的那样工作。当我包含多个复合组件时，每个组件都会收到最后一个包含的复合组件的值，我该如何解决这个问题呢？
Value of variables.formid I'm using in a helper.js file. When I include this composite component only once, it's working like it should. When I include multiple composite components, every component receives the value of a last included composite component, how can I solve this issue?
推荐答案
基本上有两种方法。
-
将一种注册功能添加到
helper.js，以便您可以在那里明确注册，而不是让它搜索复合材料。
Add kind of "register" function to
helper.js, so that you can explicitly register it there, instead of letting it to search for composites.
<h:outputScript name="js/helper.js" target="head" />
<div id="#{cc.clientId}">
...
</div>
<h:outputScript>helper.register("#{cc.clientId}", { foo: "somevalue" });</h:outputScript>
可以通过JS对象作为参数提供选项。这也是a.o. PrimeFaces使用 PrimeFaces.cw（）函数，其中小部件名称也作为选项传递。
Options can be provided via a JS object as argument. This is also how a.o. PrimeFaces work with PrimeFaces.cw() function, whereby the "widget name" is also passed as an option.
为复合赋予一个独特的样式类：
Give the composite an unique style class like so:
<h:outputScript name="js/helper.js" target="head" />
<div id="#{cc.clientId}" class="your-foo-composite">
...
</div>
这样 helper.js 就可以了在准备文件期间按类名收集它们。
This way the helper.js can just collect them by class name during document ready.
// 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输出不受内联脚本的影响。
It also keeps your HTML output free of inline scripts.
无关具体问题，使用js作为初始代码中的库名称并不好。仔细阅读什么是JSF资源库以及应该如何使用？另请注意，我将 target =head属性添加到< h： outputScript> 。如果您正确使用JSF < h：head> 组件，它将让JSF自动将脚本定位到生成的HTML < head> 元素。
Unrelated to the concrete problem, usage of "js" as library name as in your initial code is not good. Carefully read What is the JSF resource library for and how should it be used? Also note that I added target="head" attribute to the <h:outputScript>. In case you're properly using JSF <h:head> component, it will let JSF autorelocate the script to the generated HTML <head> element.
这篇关于如何多次包含相同的JSF Composite Component以拥有自己的javascript范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
