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

Posted 2023-02-22

【中文标题】如何将 JSF 托管 bean 属性传递给 JavaScript 函数？

【英文标题】：How do I pass JSF managed bean properties to a JavaScript function?

【发布时间】：2013-01-20 11:12:59

【问题描述】：

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

【参考方案1】：

这并不完全是 JSF 变量的“传递”。这只是打印 JSF 变量，就好像它们是 JavaScript 变量/值一样。要知道，JSF 和 JS 根本不同步运行。 JSF 在网络服务器中运行并生成 html/CSS/JS 代码，一旦到达那里，这些代码又会在网络浏览器中运行。

您的具体问题很可能是因为您编写 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> 以使其异步。

【参考方案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（这不太可能，而且即使它确实返回了也可能非常糟糕），您还需要修复该函数。

【参考方案3】：

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

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

【讨论】：

Primefaces 团队似乎删除了此文档。顺便说一句，这很老了。

@NickAth 试试这个：primefaces.org/showcase/ui/misc/requestContext.xhtml