在JSF复合组件中集成JavaScript,干净的方式

Question

在JSF中,将JavaScript集成到复合功能中的"正确"和"干净"方式是什么？我是Unobtrusive JavaScript的粉丝,并将HTML与JS分离.什么是尽可能小怪癖的好方法？到目前为止,这是我最喜欢的:

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

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

我不喜欢的是,language A用来生成language B.事件处理程序和东西基本相同.我最喜欢的是通过附加那些处理程序<insert favorite DOM JavaScript library here>.这可能吗？你是如何进行这种整合的？

Answer 1

我会说你所拥有的是你能得到的最好的东西,只要你绝对肯定HTML元素的本质是如此独特,你绝对需要每次都用ID来选择它.

如果HTML表示不是该唯一的(我可以想像,一个Facelets的模板或包括文件可能包含应用范围内唯一的HTML元素,如头,菜单,页脚等,但它可以在单个视图中多次重复使用复合部件？我终生无法想象,那么你也可以考虑使用一个唯一的类名和钩子初始化.

例如 /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>

在/resources/composites/yourComposite.js(假设您正在使用jQuery)

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

如有必要,您可以在以下位置为每个提取自动生成的HTML元素ID jQuery.each():

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