###前提・実現したいこと
現在monaca + OnsenUIでアプリ開発の勉強をしているのですが、
「クラウドでできるHTML5ハイブリッドアプリ開発」を参考にしてprepostの使い方を勉強しようとしたのですが、サンプルのOnsenUIとCordovaのバージョンが古かったので更新をしたところprepostが動作しなくなってしまったのですが、どこを修正すればいいのかが分かりません。
###該当のソースコード
index.html
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <script src="components/loader.js"></script> 7 <link rel="stylesheet" href="components/loader.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <script> 10 ons.bootstrap(); 11 ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default) 12 ons.ready(function() { 13 myNavigator.on('prepush', function(event){ 14 var len = document.getElementById('my-input').value.length; 15 if(len === 0){ 16 event.cancel(); 17 ons.notification.alert({ title: "エラー", message: "値を入力してください。" }); 18 } 19 }); 20 document.addEventListener("pageinit", function(e) { 21 if (e.target.id == "page2") { 22 document.getElementById('info').textContent = document.getElementById('my-input').value; 23 } 24 }); 25 }); 26 </script> 27</head> 28<body> 29 <ons-navigator var="myNavigator" page="page1.html"> 30 </ons-navigator> 31</body> 32</html> 33
page1.html
HTML
1<ons-page> 2 <ons-toolbar> 3 <div class="center">Navigator</div> 4 </ons-toolbar> 5 6 <div style="text-align: center"> 7 <br> 8 <input type="text" class="text-input" id="my-input" style="width: 80%"> 9 <br> 10 <br> 11 <ons-button 12 onclick="myNavigator.pushPage('page2.html')"> 13 Push Page 2 14 </ons-button> 15 </div> 16</ons-page>
page2.html
HTML
1<ons-page id="page2"> 2 <ons-toolbar> 3 <div class="left"><ons-back-button>Back</ons-back-button></div> 4 <div class="center">Page 2</div> 5 </ons-toolbar> 6 7 <div style="text-align: center"> 8 9 <h1>Page 2</h1> 10 <p id="info"></p> 11 <ons-button 12 onclick="myNavigator.popPage()"> 13 Pop Page 14 </ons-button> 15 16 17 18 </div> 19</ons-page> 20
追記
正常な場合の動作は、値が何も入力されないままボタンを押した場合はpage2への移動がキャンセルされ、値が入力されていた場合はpage2へ画面遷移をしpage2には最初に入力した値が表示されるものになっています。
###補足情報(言語/FW/ツール等のバージョンなど)
旧バージョン
OnsenUI 1.2.1
Cordova 3.5
新(更新後)バージョン
OnsenUI 2.7.0
Cordova 6.5
回答1件
あなたの回答
tips
プレビュー