ONSEN UI + JQueryのタブ切り替え時のons.readyとscriptについて
お世話になります。
MoancaIDEでiOS/Android向けアプリを開発中ですが、頻繁にJQueryによるAjax通信が動作しなくなり原因がわからず困っています。
というのも、そもそも別ページに記載したjavascriptが動作していないのではないかという疑念です。
環境:MoancaIDE / Chrome 40.0.2214.93 m
Cordova 4.1.0
ONSEN UI 1.2.1
JQuery MonacaVer 2.0.3
iOS MonacaDebugger 3.2.0
■やりたいこと
タブバー+ナビゲーションコンポーネントを使用したい
タブバーにより読みこまれたhtmlファイル内で記載されているスクリプトでデータを取得し、画面に反映させたい
■ファイル構成
http://docs.monaca.mobi/cur/ja/sampleapp/samples/onsen_ui_tabbar_navigator/
こちらのサンプルをそのまま使いつつ独自にコードを加えています。
index.html内にタブバー記載(基本部分ははしょります)
<ons-tabbar>
<ons-tab label="home" page="home_navi.html" icon="ion-home" active="true"></ons-tab>
<ons-tab label="page2" page="page2.html" icon="ion-coffee"></ons-tab>
</ons-tabbar>
home_navi.html
<ons-navigator title="HOME" var="MyNavi" page="home.html">
</ons-navigator>
<ons-template id="home.html">
<script src="js/home.js"></script>
<script>
ons.ready(function(){
console.log('hoge');
//test.hoge();
});
</script>
<ons-page>
<ons-toolbar>
<div class="center">HOME</div>
</ons-toolbar>
<div>this tab is home</div>
</ons-page>
■home.htmlで起きている現象
タブバーから遷移することから、別のページ自体は読み込まれているようですが、home.jsが動作していない。
ただ出来ているときとそうじゃないときがあり、Monaca側のバグなのか、それともons.readyの仕様をよく理解していないためにjsファイルの読み込み順の問題なのかわかりません。
■試したこと
まずはページがきちんと読み込まれたのかチェックするために、console.log('home is done');を実行。
しかしログが出ませんでした。
また、devicereadyが呼ばれ、デバイスがきちんと準備されていることを確認してから試しているのでデバイス側の読み込み待ちということもなさそうです。
■想定している理由
Monacaビルドサーバー?側でデータのキャッシュがされているのではないか、また、そのキャッシュがおかしくなっているのでは?
一定時間経つと治る(コード変更せず)ことから、tmpなどに保持されており翌日には消えているため動作しているのではと考えています。
似たような状態になった方、もしくは解決された方がいましたら
ぜひアドバイスいただけると助かります。
【2015年2月09日 追記】
結局のところ、各種サイト確認してもONSEN UI自体がAngularjsで作成されているため、そちらの方針に従ったほうが良さそうなため、既存ロジックある程度使い回しで構築し直すことにしました。
Monacaドキュメント側にはJQueryで作成できる旨が書いてありますが、正直該当項目は消してほしいと思います。