未在块内解析的 JSF 组件<script>

Question

我必须更改JSF页面中的<script> ... </script>，并尝试在脚本中评估JSF组件。EL被求值，但是标签本身没有被修改。

这种行为的原因是什么?

的例子:

<script type="text/javascript">
    //<![CDATA[
        function doSomething() {
            $('.userNode').droppable({
                activeClass : 'ui-state-active',
                hoverClass : 'ui-state-highlight',
                tolerance : 'intersect',
                drop : function(event, ui) {
                   <h:panelGroup rendered="#{myBean.useThis}">
                     alert("code A");
                   </h:panelGroup>
                   <h:panelGroup rendered="#{!myBean.useThis}">
                     alert("code B");
                   </h:panelGroup>
        }
            });
        };
    //]]>   </script>

EL #{!myBean.useThis}被评估为真/假，而<h:panelGroup>在渲染结果中。

为什么?

Answer 1

这是因为您将它放置在CDATA块中。CDATA块中的任何内容都被视为字符数据，而不是XML数据。

最好不要这样做。这是一种糟糕的做法。将JS函数放在它自己的.js文件中。使用JSF/EL只准备JavaScript变量，JS函数随后会请求(作为方法参数)或自己访问(在窗口范围内)，而不是填充JS函数的部分。

。

<h:outputScript>var useThis = #{myBean.useThis};</h:outputScript>
<h:outputScript name="script.js" />

function doSomething() {
    $('.userNode').droppable({
        activeClass : 'ui-state-active',
        hoverClass : 'ui-state-highlight',
        tolerance : 'intersect',
        drop : function(event, ui) {
           if (useThis) {
               alert("code A");
           }
           else {
               alert("code B");
           }
        }
    });
}

为了防止污染全局作用域，可以考虑创建一个命名空间。

<h:outputScript>var my = my||{}; my.useThis = #{myBean.useThis};</h:outputScript>

           if (my.useThis) {
               alert("code A");
           }
           else {
               alert("code B");
           }

参见:

解析XHTML错误:元素的内容必须包含格式良好的字符数据或标记