JSF bean属性在外部JavaScript文件未评估(JSF bean property not

如果我想在JavaScript评估JSF bean的属性，我看到它的工作原理，如果JavaScript片段是XHTML文件里，但是当JavaScript片段是在一个单独的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文件的工作？

Answer 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" />

Answer 2:

我个人比较喜欢下面的方法

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


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

我只是不喜欢混合使用的js代码JSF ...

Answer 3:

我只是想回答前要检查什么的，就像我在我的评论说：

我认为你不能从外部JS，作为一种解决方法，需要通过调用它像通过从JSF页面，价值JS功能的唯一途径functionName(#{value}); 和你在像一个正常的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
}

当然，你可以通过多参数不仅是单个参数。

Answer 4:

多亏了@铝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);
});

文章来源: JSF bean property not evaluated in external JavaScript file