サンプルの更新をしたらprepostが使えなくなった

###前提・実現したいこと
現在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