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