javascript - 在 JSF 复合组件中集成 JavaScript，干净的方式

Question

在 JSF 中，将 JavaScript 集成到复合组件中的“正确”和“干净”方法是什么？我是Unobtrusive JavaScript的粉丝，并将 HTML 与 JS 与 CSS 分开。什么是尽可能少的怪癖的好方法？到目前为止，这是我最喜欢的:

<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 元素，如页眉、菜单、页脚等，但复合组件哪个可以在单个 View 中多次重复使用？我终生无法想象)，那么您还可以考虑使用唯一的类名并对其进行 Hook 初始化。

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

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

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