Primefaces Mobile JS只在第一页上加载

时间:2012-10-28 10:26:45

标签: javascript jsf primefaces

我有一个使用Primefaces mobile构建的网络应用程序。总的来说,一切都很好,我可以愉快地从视图到视图等导航。

当我尝试加载外部JS文件时,问题就出现了。更具体地说,外部JS /事件侦听器仅处理加载的第一个“视图”。所有其他“观点”的行为就像JS甚至没有被调用一样。

我花了几个小时来缩小范围,但最后我使用第三方库“iscroll.js”(http://cubiq.org/iscroll-4)来隔离问题。

如果我将iscroll.js文件放在我的资源目录中并按照iscroll文档,在第一个视图上创建一个滚动div,一切都按预期完美运行。如果我把相同的div放在任何其他视图上我什么也得不到。我可以在“视图”中来回导航,并且最初的“视图”保持其“正确性”(即,当我转到另一个“视图”时,它不会停止工作)。

显然我的问题是如何让它在所有视图上运行?我的猜测是,这归结于我对Primefaces Mobile如何运作缺乏了解,但任何可能提供帮助的JSF,Primefaces,JS Gurus都会非常感激。

更新:基本的精简代码来解释。

<f:view xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:pou="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile"
    contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE"
    xmlns:ez="http://java.sun.com/jsf/composite/ezcomp">

<pm:page title="iConsult">

    <f:facet name="postinit"> 
        <h:outputScript name="js/iscroll.js"/>
    </f:facet>

    <script type="text/javascript">

        // Variables -----------------------------------------------------------
        var myScroll; // Scrolling lib var

        function loadScroll() {
            setTimeout(function() {
                myScroll = new iScroll('wrapper');
            }, 100);

        }
        window.addEventListener('load', loadScroll, false);
     </script>


<!-- Main View -->
    <pm:view id="main">
        <pm:header title="main page" swatch="b">
            <f:facet name="right">

            </f:facet>
        </pm:header>

        <pm:content>
           // If I place the iscroll div here it works
           // ...lots of code to do with the app
        </pm:content>

    </pm:view>

 <!-- Other View -->
    <pm:view id="view1">
        <pm:header title="view1" swatch="b">
            <f:facet name="right">

            </f:facet>
        </pm:header>

        <pm:content>
           // If I place the iscroll div here it doesn't works
           // ...lots of code to do with the app
        </pm:content>

    </pm:view>

  </pm:page>

</f:view>

要明确这不是iscroll所独有的。我只是使用它作为参考,但我尝试过的所有外部JS文件就是这种情况。

0 个答案:

没有答案