外部JavaScript文件中未評估JSF bean屬性

Question

如果我想從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，並將其包含在“ <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" />

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，這是解決此問題的唯一方法，您需要通過像functionName(#{value});這樣調用來將值從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

感謝@ 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);
});

外部JavaScript文件中未評估JSF bean屬性

問題描述

4 個解決方案

解決方案1
5 2012-10-12 00:00:31

解決方案2
2 2012-07-15 10:46:55

解決方案3
1 2012-07-15 10:25:30

解決方案4
0 已采納 2012-07-15 11:01:35

外部JavaScript文件中未評估JSF bean屬性

問題描述

4 個解決方案

解決方案1 5 2012-10-12 00:00:31

解決方案2 2 2012-07-15 10:46:55

解決方案3 1 2012-07-15 10:25:30

解決方案4 0 已采納 2012-07-15 11:01:35

解決方案1
5 2012-10-12 00:00:31

解決方案2
2 2012-07-15 10:46:55

解決方案3
1 2012-07-15 10:25:30

解決方案4
0 已采納 2012-07-15 11:01:35