代码之家 › 专栏 › 技术社区 › perissf

外部JavaScript文件中未评估JSFbean属性

el jakarta-ee jsf javascript

1

perissf · 技术社区 · 13 年前

如果我想从JavaScript中评估JSFbean属性,我会发现如果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>

我的js.js

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

在第二种情况下,警报框包含未计算的字符串 #{myBean.myProperty}

如何使它在外部js文件中工作?

4 回复 | 直到 13 年前

1

5

Steven 13 年前

另一种解决方案是将*.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" />

2

Daniel 13 年前

我个人更喜欢以下方法

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


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

我只是不喜欢把js代码和JSF混合在一起。。。

3

1

Al-Mothafar 13 年前

我只是想在回答之前检查一下,就像我在评论中说的那样:

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

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

4

0

perissf 13 年前

多亏了@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>

我的js.js

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