在 JSF 复合组件中集成 JavaScript，干净的方式 [英] Integrate JavaScript in JSF composite component, the clean way

问题描述

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

//...</composite:interface><复合:实现>//...<脚本>initSomething('#{cc.clientId}');</composite:implementation>

我不喜欢的是，使用language A生成language B.事件处理程序和其他东西基本上是一样的.我最喜欢的是通过 <在此处插入最喜欢的 DOM JavaScript 库> 来附加这些处理程序.这可能吗?您如何进行这种集成?

解决方案

我想说的是，你所拥有的就是你能得到的最好的，前提是你绝对肯定 HTML 元素的性质是如此独特以至于您绝对需要每次都通过 ID 选择它.

如果 HTML 表示不是那个唯一的(我可以想象一个 Facelets 模板或包含文件可能包含应用程序范围内唯一的 HTML 元素，如页眉、菜单、页脚等，但一个复合组件哪个可以在单个视图中多次重用?我无法想象)，那么您也可以考虑使用唯一的类名并对其进行钩子初始化.

例如/resources/composites/yourComposite.xhtml

<h:outputScript library="composites" name="yourComposite.js" target="head"/><div id="#{cc.clientId}" class="您的复合材料">...

</cc:实施>

在 /resources/composites/yourComposite.js 中(假设您使用的是 jQuery)

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

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

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

In JSF, what would be the "right" and "clean" way to integrate JavaScript i.e. into a composite-compenent? I am a fan of Unobtrusive JavaScript, and separating HTML from JS from CSS. What would be a good way to have as little quirks as possible? This is what I like the best so far:

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

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

What I don't like is, to use language A to generate language B. Basically the same goes for event handlers and stuff. My favorite would be to attach those handlers via <insert favorite DOM JavaScript library here>. Is this possible? How do you do this kind of integration?

解决方案

I'd say that what you've there is the best you can get, provided that you're absolutely positive that the HTML element's nature is so unique that you absolutely need to select it by an ID, every time again.

If the HTML representation is not that unique (I can imagine that a Facelets template or include file might contain application-wide unique HTML elements like header, menu, footer, etc, but a composite component which can be reused multiple times in a single view? I can't for life imagine that), then you could also consider using an unique classname and hook initialization on it.

E.g. /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>

with in the /resources/composites/yourComposite.js (assuming that you're using jQuery)

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

You can if necessary extract the autogenerated HTML element ID for each of them in a jQuery.each():

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

这篇关于在 JSF 复合组件中集成 JavaScript，干净的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！