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

问题描述

在JSF中，将JavaScript整合到复合竞争者中的正确和干净方式是什么？我是不引人注目的JavaScript 的粉丝，并将HTML与JS分离。什么是尽可能小怪癖的好方法？这是我到目前为止最喜欢的：

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>    

我不喜欢的是，使用语言A 生成语言B 。事件处理程序和东西基本相同。我最喜欢的是通过<在这里插入最喜欢的DOM JavaScript库> 来附加这些处理程序。这可能吗？你是如何进行这种整合的？

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?

推荐答案

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

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.

如果HTML表示不是 唯一（我可以想象Facelets模板或包含文件可能包含应用程序范围内唯一的HTML元素，如标题，菜单，页脚等，但是一个可以多次重复使用的复合组件一个视图？我不能想象那个），那么你也可以考虑使用一个唯一的类名和钩子初始化。

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.

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

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

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

如有必要，您可以为每个提取自动生成的HTML元素ID他们在 jQuery.each（） ：

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屋！