1

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}');
});

この 2 番目のケースでは、アラート ボックスに未評価の文字列が含まれています。#{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 の提案のおかげで、最終的に次の方法で問題を解決しました。

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);
});
于 2012-07-15T11:01:35.220 に答える