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

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 在网络服务器中运行并生成 HTML/CSS/JS 代码，一旦到达那里，这些代码又会在网络浏览器中运行。

您的具体问题很可能是因为您编写的 JSF 代码生成了无效的 JS 语法。验证这一点的一种简单方法是检查 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>

但是，嘿，看，它代表一个名为 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>使其异步。