web-dev-qa-db-ja.com

JSFマネージドBeanプロパティをJavaScript関数に渡すにはどうすればよいですか？

JSFマネージドBeanのプロパティをJavaScript関数に渡す方法を知りたいのですが。

このようなもの：

<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>
javascriptjsfparameter-passing
11
Isma90

これは、JSF変数の正確な「受け渡し」ではありません。これは、JSF変数をJavaScript変数/値であるかのように出力するだけです。ご存知のとおり、JSFとJSはまったく同期して実行されません。 JSFはWebサーバーで実行され、HTML/CSS/JSコードを生成します。このコードは、そこに到着するとWebブラウザーで実行されます。

具体的な問題は、無効なJS構文を生成するようにJSFコードを記述したことが原因である可能性があります。それを確認する簡単な方法は、右クリックしてブラウザでソースを表示して見つけることができるJSF生成のHTML出力をチェックし、何も表示されないかどうかをチェックすることです。 Chrome/IE9 +/Firefox23 +でF12キーを押すと表示されるブラウザのJSコンソールで構文エラーが報告されます。

ここで_#{entity.key}_を想像してみてください

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

Java _"foo"_のような文字列変数を出力すると、生成されたHTMLは次のようになります。

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

しかし、ちょっと見てください。これは、JS文字列値ではなくfooという名前のJavaScript変数を表しています。したがって、実際に最終的に次のようになりたい場合

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

次に、そのHTMLを正確に生成するようにJSFに指示する必要があります。

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

ただし、JSF変数の特殊文字には注意してください。 OmniFaces of:escapeJS() function を使用できます。

具体的な問題とは無関係であるため、actualizaMenu()の具体的な実装は意味がありません。 Beanプロパティを設定しようとしているようです。そのためにJSを使用するのではなく、代わりに_<h:commandLink>_を使用する必要があります。

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

必要に応じて_<f:ajax>_をネストして非同期にします。

24
BalusC

同じ結果を得るには、jQueryと要素のデータ属性でイベントバインディングを使用することをお勧めします（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>
_

また、他の場所で指摘されているように、#{linkedMenu.setKey(key)}が実際にJavaScriptの一部を返さない限り（継ぎ目がなく、たとえ返されたとしても本当に悪いでしょう）、関数も修正する必要があります。

1
Jonas Schubert Erlandsson

私はこの質問が古いことを知っていますが、まだ探している人には別の方法があります。

Primefacesを使用している場合は、これを試してみてください。 リクエストコンテキスト

0
Jonathas Pacífico