Интеграция JavaScript в составной компонент JSF, чистый способ

В JSF, каков был бы "правильный" и "чистый" способ интегрировать JavaScript, т.е. в составный-compenent? Я поклонник ненавязчивый 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>. Это возможно? Как вы делаете такую интеграцию?

Ответ 1

Я бы сказал, что то, что у вас есть, лучшее, что вы можете получить, при условии, что вы абсолютно уверены, что природа элемента HTML настолько уникальна, что вам абсолютно необходимо выбрать его по идентификатору каждый раз.

Если представление HTML не является таким уникальным (я могу представить, что шаблон Facelets или файл include может содержать уникальные 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-кодом для каждого из них в jQuery.each():

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