Primefaces モバイルを使用して構築された Web アプリがあります。全体として、すべてがうまく機能し、ビューからビューへと楽しくナビゲートできます。
外部 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ファイルの場合です。