如何将 JSF 托管 bean 属性传递给 JavaScript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14709014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I pass JSF managed bean properties to a JavaScript function?
提问by Isma90
I would like to know how I can pass JSF managed bean properties to a JavaScript function.
我想知道如何将 JSF 托管 bean 属性传递给 JavaScript 函数。
Something like this:
像这样的东西：
<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>
回答by BalusC
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 变量的“传递”。这只是打印 JSF 变量，就好像它们是 JavaScript 变量/值一样。您知道，JSF 和 JS 根本不同步运行。JSF 在 webserver 中运行并生成 HTML/CSS/JS 代码，一旦到达那里，这些代码又会在 webbrowser 中运行。
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 Sourcein 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+.
您的具体问题很可能是因为您以生成无效 JS 语法的方式编写了 JSF 代码。验证这一点的一种简单方法是检查 JSF 生成的 HTML 输出，您可以通过右键单击找到该输出，在浏览器中查看源代码，并检查是否在浏览器的 JS 控制台中没有看到任何语法错误报告，您可以在 Chrome/IE9+/Firefox23+ 中按 F12 查找。
Imagine that #{entity.key}here
想象一下，#{entity.key}这里
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
prints a Java string variable like "foo", then the generated HTML would look like
打印一个 Java 字符串变量"foo"，然后生成的 HTML 看起来像
<a onclick="actualizaMenu(foo)">some name</a>
But hey, look, that represents a JavaScript variablenamed foo, not a JS string value! So if you actually want to ultimately end up as
但是，嘿，看，它代表了一个名为的 JavaScript变量foo，而不是一个 JS 字符串值！所以如果你真的想最终成为
<a onclick="actualizaMenu('foo')">some name</a>
then you should instruct JSF to generate exactly that HTML:
那么您应该指示 JSF 生成该 HTML：
<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>
Beware of special characters in the JSF variable though. You can use OmniFaces of:escapeJS()functionfor that.
不过要注意 JSF 变量中的特殊字符。您可以为此of:escapeJS()使用OmniFaces功能。
Unrelatedto 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.
与具体问题无关，具体执行actualizaMenu()没有意义。您似乎正在尝试设置 bean 属性。您不应该为此使用 JS，而应使用 a <h:commandLink>。
<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />
Nest if necessary a <f:ajax>to make it asynchronous.
如有必要，嵌套 a<f:ajax>使其异步。
回答by Jonas Schubert Erlandsson
I would recommend using event binding with jQuery and the data attribute on elements to get the same result (assuming you use jQuery):
我建议使用带有 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>
And, as pointed out elsewhere, unless #{linkedMenu.setKey(key)}actually returns a piece of javascript (which seams unlikely and would probably be really bad even if it did) you need to fix the function as well.
而且，正如其他地方所指出的，除非#{linkedMenu.setKey(key)}实际返回一段 javascript（这不太可能，即使它确实返回也可能非常糟糕），否则您还需要修复该函数。
回答by Jonathas Pacífico
I know this question is old, but to those who are still looking there's an alternative.
我知道这个问题很老，但对于那些仍在寻找替代方案的人。
If you are using primefaces just try this out. Request Context
如果您使用的是primefaces，请尝试一下。 请求上下文
