1

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

当我尝试加载外部 JS 文件时，问题就来了。更具体地说，外部 JS / 事件侦听器仅在加载的第一个“视图”上工作。所有其他“视图”都表现得好像 JS 甚至没有被调用。

我花了几个小时来缩小范围，但我最终使用了第 3 方库“iscroll.js”（http://cubiq.org/iscroll-4）来隔离问题。

如果我将 iscroll.js 文件放在我的资源目录中并遵循 iscroll 文档，则在第一个视图上创建一个滚动 div，一切都按预期完美运行。如果我采用相同的 div 并将其放在任何其他视图上，我将一无所获。我可以在“视图”中来回导航，并且初始“视图”保持其“正确性”（即，当我转到另一个“视图”时它不会停止工作）。

显然我的问题是如何让它适用于所有视图？我的猜测是，这归因于我对 Primefaces Mobile 的工作原理缺乏了解，但任何可能提供帮助的 JSF、Primefaces、JS 大师都将不胜感激。

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

<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 文件都是这种情况。

4

0 回答 0