Когда составной компонент, содержащий JS код визуализируется несколько раз, JS работает только на последнем компоненте

Question

У меня есть составной компонент, который использует PrimeFaces <p:selectOneMenu> определенные как:

<p:selectOneMenu id="inOut" onchange="inOutChanged()"> 
    .. 
</p:selectOneMenu> 

то у меня есть файл JavaScript, который входит в состав компонента, который определяет функцию inOutChanged() как

function inOutChanged() { 
    var inOut = $({cc.clientId}:inOut); 
    if(inOut.val() == "INC") { 
    slider.addClass("includedInRange"); 
    } 
} 

Этот составной компонент прекрасно работает, когда есть только одна на этой странице. Проблема в том, что мне нужно иметь 4 из них на странице. Поэтому, когда я меняю выбор одного составного компонента, он меняет класс ползунка последнего компонента. Я считаю, что это связано с тем, что есть функции 4 inOutChanged(), которые определены на странице.

Есть ли способ ограничить функцию или назвать ее уникально, чтобы они не топтались друг на друга?

Answer 1

Ваша конкретная проблема вызвана тем, что вы переопределили и переназначили одну и ту же переменную JavaScript slider в глобальной области. Вам нужно переместить объявление slider внутрь функции.

Redeclaring точно такая же функция не наносит вреда, но является простой неэффективной, а не DRY. Вы должны переместить функцию в свой собственный файл .js и использовать <h:outputScript>, чтобы включить его. JSF в конечном итоге включит его только один раз. Затем измените функцию так, чтобы принимать переменные в качестве аргументов.

Что-то вроде этого

<h:outputScript library="composite" name="some.js" target="head" /> 
... 
<h:panelGroup id="..."> 
    <p:selectOneMenu ... onchange="inOutChanged(this)"> 
     ... 
    </p:selectOneMenu> 
    ... 
    <p:slider ... /> 
</h:panelGroup> 

с этим внутри /resources/composite/some.js (при условии, что /resoruces/composite содержит свой композиционный компонент XHTML-файл)

function inOutChanged(menuElement) { 
    var $menu = $(menuElement); 
    if ($menu.val() == "INC") { 
     $menu.parent().find(".ui-slider").addClass("includedInRange"); 
    } 
} 

Answer 2

Вы должны использовать $(this) селектор в пределах вашего изменения слушателя событий:

$(".inOut").change(function(){ 
    var sel = $(this).find('option:selected').text(); 
    if(sel == 'INC') { 
     //find slider and add class 
    } 
}); 

Обратите внимание, что я привязан OnChange слушателей событий вне рамок компоненты, и нашел компоненты на основе прикрепленного класса CSS. Это можно сделать в пределах $(document).ready().

Конечно, вы можете использовать идентификаторы клиентов в JS-функции или связывать эту функцию с атрибутом компонента.