15

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>
4

3 に答える 3

28

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

具体的な問題は、無効な JS 構文を生成するような方法で JSF コードを記述したために発生する可能性が最も高いです。これを確認する簡単な方法は、JSF で生成された HTML 出力を確認することです。これは、右クリックしてブラウザでソースを表示し、ブラウザの JS コンソールに構文エラー レポートが表示されないかどうかを確認することで確認できます。 Chrome/IE9+/Firefox23+ では F12 を押して検索します。

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

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

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

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

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

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

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

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

ただし、JSF 変数の特殊文字に注意してください。そのためにOmniFacesof:escapeJS()関数を使用できます。

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

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

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

于 2013-02-05T13:56:06.617 に答える
1

jQuery でイベント バインディングを使用し、要素の data 属性を使用して同じ結果を取得することをお勧めします (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 の一部を返さない限り (継ぎ目はほとんどなく、たとえ返されたとしてもおそらく本当に悪いでしょう)、関数も修正する必要があります。

于 2013-02-05T14:17:56.400 に答える