1

如果我想从 JavaScript 中评估 JSF bean 属性，我发现如果 JavaScript 片段位于 xhtml 文件中，它可以工作，但当 JavaScript 片段位于单独的 js 文件中时它不起作用。

所以，这有效：

索引.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 的属性：

索引.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 文件工作？

4

4 回答 4

5

另一种解决方案是将您的 *.js 文件更改为 *.xhtml 并将其包含在“<ui:include ... />”中。为避免解析器抱怨在您的 *.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" />
于 2012-10-12T00:00:31.007 回答
2

我个人更喜欢以下方法

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


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

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

于 2012-07-15T10:46:55.813 回答
1

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

我认为你不能从外部 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
}

当然，您不仅可以传递单个参数，还可以传递多参数。

于 2012-07-15T10:25:30.667 回答
0

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

索引.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);
});
于 2012-07-15T11:01:35.220 回答