###前提・実現したいこと
MonacaでOnsenUI v2にて、ons-tabとons-navigatorを併用したページ遷移を、ファイル分けで実装したい。
実際に作成するアプリは複数の機能を実装したもっと複雑なものになるため、完成した雛形を使いやすくしようと思い、ons-page毎にhtmlファイルを作りファイル分けを行いました。
###発生している問題・エラーメッセージ
ons-page毎にファイル分けしたところ、pushPageを行ってもページ遷移が起きなくなってしまいました。
ファイル分けを行う際、ons-templateは削除して、ons-page単位でhtmlファイルを作成したのですが、なぜ動かなくなってしまったのでしょうか?
アドバイスを頂けると幸いです。
###該当のソースコード
**//index.html** <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> // Page init event document.addEventListener('init', function(event) { var page = event.target; if (page.matches('#first-page')) { page.querySelector('#push-button').onclick = function() { document.querySelector('#navigator').pushPage('page1-1-1.html'); }; } else if (page.matches('#second-page')) { page.querySelector('#pop-button').onclick = function() { document.querySelector('#navigator').popPage(); }; } }); </script> </head> <body> <ons-page> <ons-navigator id="navigator" page="top.html"></ons-navigator> </ons-page> </body> </html> **//top.html** <ons-page> <ons-tabbar position="auto"> <ons-tab label="Tab 1" page="tab1.html" active> </ons-tab> <ons-tab label="Tab 2" page="tab2.html"> </ons-tab> </ons-tabbar> </ons-page> **//tab1.html** <ons-page> <ons-toolbar> <div class="center" id="toolbar-title">tab1</div> </ons-toolbar> <ons-tabbar position="top"> <ons-tab label="Tab 1-1" page="tab1-1.html" active> </ons-tab> <ons-tab label="Tab 1-2" page="tab1-2.html"> </ons-tab> </ons-tabbar> </ons-page> **//tab2.html** <ons-page> <ons-toolbar> <div class="center">tab2</div> </ons-toolbar> </ons-page> **//tab1-1.html** <ons-page id="first-page"> <div class="content" style="text-align: center"> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </div>A </ons-page> **//tab1-2.html** <ons-page> </ons-page> **//tab1-1-1.html** <ons-page id="second-page"> <ons-toolbar> <div class="left"><ons-back-button>tab 1-1</ons-back-button></div> <div class="center">tab 1-1-1</div> </ons-toolbar> <div class="content" style="text-align: center"> <p>This is the second page.</p> <ons-button id="pop-button">Pop page</ons-button> </div> </ons-page>
あなたの回答
tips
プレビュー