如何将 JSF 托管 bean 属性传递给 JavaScript 函数? [英] How do I pass JSF managed bean properties to a JavaScript function?

问题描述

我想知道如何将 JSF 托管 bean 属性传递给 JavaScript 函数.

I would like to know how I can pass JSF managed bean properties to a JavaScript function.

像这样:

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

推荐答案

这并不完全是 JSF 变量的传递".这只是打印 JSF 变量，就好像它们是 JavaScript 变量/值一样.您知道，JSF 和 JS 根本不同步运行.JSF 在 webserver 中运行并生成 HTML/CSS/JS 代码，这些代码在到达那里后又在 webbrowser 中运行.

This is not exactly "passing" of JSF variables. This is just printing JSF variables as if they are JavaScript variables/values. You know, JSF and JS do not run in sync at all. JSF runs in webserver and produces HTML/CSS/JS code which in turn runs in webbrowser once arrived over there.

您的具体问题很可能是因为您编写的 JSF 代码生成了无效的 JS 语法.验证这一点的一种简单方法是检查 JSF 生成的 HTML 输出，您可以通过右键单击找到该输出，在浏览器中查看源代码，并检查您是否在浏览器中的 JS 控制台，您可以在 Chrome/IE9+/Firefox23+ 中按 F12 找到.

Your concrete problem is most likely caused because you wrote JSF code in such way that it generates invalid JS syntax. An easy way to verify that is by just checking the JSF-generated HTML output which you can find by rightclick, View Source in browser, and by checking if you don't see any syntax error reports in the JS console in browser which you can find by pressing F12 in Chrome/IE9+/Firefox23+.

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

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

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

prints a Java string variable like "foo", then the generated HTML would look like

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

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

But hey, look, that represents a JavaScript variable named foo, not a JS string value! So if you actually want to ultimately end up as

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

那么您应该指示 JSF 生成该 HTML:

then you should instruct JSF to generate exactly that HTML:

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

尽管如此，请注意 JSF 变量中的特殊字符.为此，您可以使用 OmniFaces of:escapeJS() 函数.

Beware of special characters in the JSF variable though. You can use OmniFaces of:escapeJS() function for that.

与具体问题无关，actualizaMenu()的具体实现没有任何意义.您似乎正在尝试设置 bean 属性.您不应该为此使用 JS，而应使用 代替.

Unrelated to the concrete problem, the concrete implementation of actualizaMenu() makes no sense. You seem to be attempting to set a bean property. You should not use JS for that, but a <h:commandLink> instead.

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

如有必要，嵌套一个 以使其异步.

Nest if necessary a <f:ajax> to make it asynchronous.

这篇关于如何将 JSF 托管 bean 属性传递给 JavaScript 函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！