Композитный компонент jsf * primefaces

Question

У меня проблема с использованием widgetVar, пока его имя генерируется динамически. Как правильно мы можем назвать такой виджет? Код компонента:

<cc:attribute name="id" required="true" type="java.lang.String" /> 
... 
<cc:implementation> 
    <p:selectOneRadio widgetVar="widgetVariable#{cc.attrs.id}" id="#{cc.attrs.id}" required="false" immediate="#{cc.attrs.immediate}" 
         value="#{cc.attrs.value}"> 
     <p:ajax event="click" oncomplete="checkRadio()"/> 
     <cc:insertChildren/> 
    </p:selectOneRadio> 

    <script type="text/javascript"> 
     /* <![CDATA[ */ 

     function checkRadio() { 
      var widgetVariable = widgetVariable#{cc.attrs.id}; //HERE PROBLEM 
      widgetVariable.dosmth(); 
     } 

     /* ]]> */ 
    </script> 
</cc:implementation> 

вот что вирд, что это работает, но когда я использую много istance этого компонента на странице widgetwar иногда сойти с умом и сделать JavaScript для многих istance компоненты.

Редактировать: все работает нормально. В любом случае у меня есть одна новая проблема. Я создал в этом .js файле некоторую глобальную переменную состояния.

var state = -1; 

function checkRadio() { 
     var widgetVariable = widgetVariable#{cc.attrs.id}; //HERE PROBLEM 
     widgetVariable.dosmth(state); 
} 

Но каждое состояние должно быть только для одного составного значения, atm каждый композитный использует этот var, некоторые идеи?

Answer 1

На самом деле есть 2 проблемы.

Первой проблемой является то, что вы объявляете JS-функции в файле XHTML вместо реального JS-файла. Если у вас несколько таких компонентов, вы в основном генерируете несколько функций JS checkRadio() для вывода HTML. Потяните страницу в своем браузере, rightclick и View Source. В основном вы увидите

<script type="text/javascript"> 
    function checkRadio() { 
     // ... 
    } 
</script> 
<script type="text/javascript"> 
    function checkRadio() { 
     // ... 
    } 
</script> 
<script type="text/javascript"> 
    function checkRadio() { 
     // ... 
    } 
</script> 
... 

Они переопределяют друг друга до последнего. Поэтому, когда вызывается checkRadio(), фактически будет вызываться последний. Очевидно, это неправильно.

У вас должна быть только одна функция. Вы можете экрнализировать переменную, просто сделав ее аргументом функции. Более того, вы не должны писать JS-код в файле XHTML, но в автономном JS-файле, который вы указываете <h:outputScript>. Дополнительный бонус, он автоматически гарантирует, что есть только один JS-файл, даже если у вас несколько составных компонентов.

<cc:implementation> 
    <h:outputScript name="myComposite.js" /> 
    ... 
    <p:ajax event="click" oncomplete="checkRadio('#{cc.attrs.id}')" /> 
</cc:implementation> 

Возвращаясь к вашему конкретному вопросу, вашей второй проблема, вы можете использовать window[variableName] нотации, чтобы получить руку глобальных (окна) переменного с помощью динамически состоящим именем переменным. Таким образом, функция checkRadio() в вашем myComposite.js (назовите ее, что вы хотите, но то же самое имя файла, как myComposite.xhtml будет наиболее самодокументирован) должен выглядеть следующим образом:

function checkRadio(compositeId) { 
    var widgetVariableName = "widgetVariable" + compositeId; 
    var widgetVariable = window[widgetVariableName]; 
    widgetVariable.dosmth(); 
}