JSF bean 属性未在外部 JavaScript 文件中评估答案

【问题标题】：JSF bean property not evaluated in external JavaScript fileJSF bean 属性未在外部 JavaScript 文件中评估
【发布时间】：2012-07-14 12:29:01
【问题描述】：

如果我想从 JavaScript 中评估一个 JSF bean 属性，我发现如果 JavaScript sn-p 在 xhtml 文件中它可以工作，但当 JavaScript sn-p 在单独的 js 文件中时它不起作用.

所以，这行得通：

index.xhtml

...
<h:body>
    <script type="text/javascript" src="resources/Javascript/jquery/jquery-1.7.2.js" />
    <script type="text/javascript" >
        $(document).ready(function() {
            alert('#{myBean.myProperty}');
        });
    </script>        
</h:body>

但这不会评估 ManagedBean 的属性：

index.xhtml

...
<h:body>
    <script type="text/javascript" src="resources/Javascript/jquery/jquery-1.7.2.js" />
    <script type="text/javascript" src="resources/Javascript/MyJS.js" />
</h:body>

MyJS.js

$(document).ready(function() {
    alert('#{myBean.myProperty}');
});

在第二种情况下，警告框包含未评估的字符串#{myBean.myProperty}

如何通过外部 js 文件使其工作？

【问题讨论】：

我认为你不能从外部 JS，作为一种解决方法，你需要将该值从 JSF 页面传递给 JS 函数，方法是像 functionName(#{value}); 一样调用它并在 JS 中做你想做的事像普通 JS 值一样的文件
谢谢，这很有意义！
您也可以将 .js 转换为 .jsp。 JSF API 中有一些方法允许您处理来自 java 代码的 EL 表达式。
老实说我更喜欢第一个建议，因为我想避免使用 JSP

标签： javascript jsf jakarta-ee el

【解决方案1】：

另一种解决方案是将您的 *.js 文件更改为 *.xhtml 并将其包含在“”中。为避免解析器抱怨在您的 *.xhtml 文件中使用了 &、，请在其周围加上 CDATA 标记。这样做的缺点是如果 *.js 文件正在被其他页面使用，浏览器将无法缓存它。

MyJS.xhtml（从 MyJS.js 更改）

<xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>
<ui:composition>

<script type="text/javascript">
//<![CDATA[
  ...your JavaScript code here...
//]]>
</script>

</ui:composition>
</h:body>
</html>

在您的 index.xhtml 文件中，执行以下操作：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
  ...
<ui:include src="MyJS.xhtml" />

【讨论】：

【解决方案2】：

我个人比较喜欢下面这种方式

<h:inputText id="myHiddenData" value="#{myBean.myProperty}" style="display:none">


$(document).ready(function() {
    alert($("#myHiddenData").val()); // or alert($("#myFormID\\:myHiddenData").val());
});

我只是不喜欢将 js 代码与 JSF 混合...

【讨论】：

您正在将 JavaScript 代码与 JSF 混合。你只是内联而不是通过 .js 文件。这是它可以工作的唯一方法。 JSF 看不到 .js 文件。
@EJP 我正在从 js 访问一个传递给 JSF 的值，我认为它不能称为“将 JavaScript 代码与 JSF 混合”

【解决方案3】：

我只是想在回答之前检查一些东西，就像我在评论中所说的那样：

我认为你不能从外部 JS，作为一种解决方法，你需要通过像 functionName(#{value}); 这样调用它来将该值从 JSF 页面传递给 JS 函数，并像普通 JS 一样在 JS 文件中做你想做的事情价值。

就像在你的 index.xhtml 中一样：

<script type="text/javascript" >
        $(document).ready(function() {
            functionName('#{myBean.myProperty}');
        });
</script>

或喜欢：

<h:commandLink action="..." value="..." onclick="functionName('#{myBean.myProperty}')"/>

在你的 js 文件中：

function functionName(var1) {
// DO what you want to do with var1 or varN like normal JS value
}

当然你可以传递一个多参数而不仅仅是单个参数。

【讨论】：

【解决方案4】：

感谢@Al-Mothafar 的建议，我终于通过以下方式解决了我的问题：

index.xhtml

...
<h:body>
    <script type="text/javascript" src="resources/Javascript/jquery/jquery-1.7.2.js" />
    <script type="text/javascript" src="resources/Javascript/MyJS.js" />
    <script type="text/javascript" >
        var myBeanProperty = '#{myBean.myProperty}';
    </script>        
</h:body>

MyJS.js

$(document).ready(function() {
    alert(myBeanProperty);
});

【讨论】：

你最好开始使用<h:outputScript stackoverflow.com/a/11333632/617373 和mkyong.com/jsf2/resources-library-in-jsf-2-0