Wie gebe ich JSF-managed-bean-Eigenschaften einer JavaScript-Funktion?

Ich würde gerne wissen, wie kann ich pass JSF-managed-bean-Eigenschaften, um eine JavaScript-Funktion.

Etwas wie dieses:

<script>
  function actualizaMenu(key){
    #{linkedMenu.setKey(key)}
  }
</script>
<ul>
  <ui:repeat value="#{moduleList.modulos}" var="entity">
    <li>
      <a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
    </li>
  </ui:repeat>
</ul>
InformationsquelleAutor Isma90 | 2013-02-05
  1. 21

    Dies ist nicht gerade die "Weitergabe" von JSF-Variablen. Dies ist nur zu drucken JSF-Variablen als wenn Sie JavaScript-Variablen/Werte. Sie wissen, JSF und JS laufen nicht synchron auf allen. JSF läuft im webserver und erzeugt HTML - /CSS - /JS-code, welcher wiederum läuft im webbrowser, wenn man einmal da.

    Ihrem konkreten problem wahrscheinlich, weil Sie schrieb JSF-code in einer solchen Weise, dass es erzeugt ungültige JS-syntax. Eine einfache Möglichkeit, um zu überprüfen, dass ist nur durch überprüfung der JSF-generierten HTML-Ausgabe, die Sie finden können, durch Rechtsklick, View Source im browser, und durch die Prüfung, wenn Sie nicht sehen, keine syntax-Fehlermeldungen in der JS-Konsole im browser, auf die du durch drücken von F12 in Chrome/IE9+/Firefox23+.

    Vorstellen, dass #{entity.key} hier

    <a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>

    druckt einen Java-string-variable wie "foo", dann die generierte HTML Aussehen würde

    <a onclick="actualizaMenu(foo)">some name</a>

    Aber hey, schau mal, das ist eine JavaScript - variable namens foo, nicht eine JS-string Wert! Also, wenn Sie wirklich wollen, um letztendlich als

    <a onclick="actualizaMenu('foo')">some name</a>

    dann sollten Sie anweisen, JSF generiert genau, dass HTML:

    <a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>

    Hüten Sie sich vor der Sonderzeichen in den JSF-variable allerdings. Sie können OmniFaces von:escapeJS() - Funktion für, die.

    Unabhängigen, um das konkrete problem, die konkrete Umsetzung der actualizaMenu() keinen Sinn macht. Sie scheinen zu versuchen, eine bean-Eigenschaft. Sie sollten nicht mit JS, sondern eine <h:commandLink> statt.

    <h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />

    Nest, wenn notwendig, eine <f:ajax> um es asynchron.

    InformationsquelleAutor BalusC
  2. 1

    Ich würde empfehlen, mit event-binding mit jQuery und dem data-Attribut auf Elemente, die das gleiche Ergebnis zu erhalten (vorausgesetzt, Sie verwenden jQuery):

    <script>
  function actualizaMenu(key){
    /* Logic here ... */
  }

  $(document).ready(function(){
    $('.menuItem').click(function(){
      var key = $(this).data('key');
      actualizaMenu(key);
    );
  });
</script>

    ...

    <ul>
  <ui:repeat value="#{moduleList.modulos}" var="entity">
    <li>
      <a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
    </li>
  </ui:repeat>
</ul>

    Und, wie schon anderswo, es sei denn #{linkedMenu.setKey(key)} tatsächlich gibt ein Stück von javascript (die Nähte unwahrscheinlich und wäre wahrscheinlich wirklich schlecht ist, auch wenn es Tat), die Sie benötigen, um zu beheben, die Funktion auch.

    InformationsquelleAutor Jonas Schubert Erlandsson
  3. 1

    Ich weiß, diese Frage ist alt, aber für diejenigen, die noch auf der Suche, gibt es eine alternative.

    Wenn Sie mit primefaces nur das ausprobieren.
    Anforderung Kontext

    InformationsquelleAutor Jonathas Pacífico
Schreibe einen Kommentar