Question

我想知道如何将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>

Answer 1

这并不完全是“传递”JSF变量。这只是打印JSF变量，就像它们是JavaScript变量/值一样。你知道，JSF和JS根本没有同步运行。 JSF在webserver中运行并生成HTML / CSS / JS代码，这些代码一旦到达那里就会在webbrowser中运行。

您的具体问题很可能是因为您编写JSF代码以致生成无效的JS语法。一种验证方法的简单方法是只检查JSF生成的HTML输出，您可以通过右键单击，浏览器中的查看源找到，并检查是否在文档中看不到任何语法错误报告。浏览器中的JS控制台，您可以在Chrome / IE9 + / Firefox23 +中按F12找到。

想象一下#{entity.key}这里

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

打印一个像"foo"这样的Java字符串变量，然后生成的HTML看起来像

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

但是，嘿，看，这代表一个名为foo的JavaScript 变量，而不是JS字符串值！所以，如果你真的想最终以

结束

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

然后你应该指示JSF准确生成HTML：

<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>嵌套以使其异步。

Answer 2

我建议使用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（不太可能接收，即使它确实很糟糕），你也需要修复该函数。

Answer 3

我知道这个问题已经过时了，但对于那些仍在寻找替代方案的人来说。

如果您使用的是Primefaces，请尝试一下。 Request Context

如何将JSF托管bean属性传递给JavaScript函数？

3 个答案: