Question

我有一个使用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文件就是这种情况。

Primefaces Mobile JS只在第一页上加载

0 个答案: