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

Question

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

Если 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 для каждого из них в виде jQuery.each():

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