Onsen UI V2 でページの読み込みに失敗する

###前提・実現したいこと

初めて質問させていただきます。
現在MONACA(ONSENUI V2)を利用しスマートフォンアプリ制作の練習をしています。
"ons-dialog"でダイアログを表示させるためにコードを書いていると、ページが読み込まれない問題が発生し悩んでいます。
下記２のソースではうまくいくのですが、下記１のように"ons-template"を利用してコードを書くとページ(page8.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  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19  </script>
20</head>
21<body>
22    <ons-navigator id="navi">
23    <ons-page id="index">
24        <ons-list-header>
25            check
26        </ons-list-header>
27        <ons-list>
28            <ons-list-item id="list1" tappable modifier="chevron">
29                <div>dialog</div>
30            </ons-list-item>
31        </ons-list>
32    </ons-page>
33    
34    <ons-template id="page8.html">
35        <ons-page id="page8">
36            <ons-toolbar>
37                <div class="left">
38                    <ons-back-button>Back</ons-back-button>
39                </div>
40                <div class="center">Title</div>
41            </ons-toolbar>
42            <div style="text-align: center; margin-top:100px;">
43                <ons-button class="show" onclick="showDialog('dialog1')">dialog</ons-button>    
44            </div>
45        </ons-page>
46        <ons-dialog cancelable id="dialog1">
47            <ons-toolbar inline>
48                <div class="center">ログイン</div>
49            </ons-toolbar>
50            <div>
51            <p>
52                <input placeholder="メールアドレス" id="username" class="text-input">
53            </p>
54            <p>
55                <input type="password" placeholder="パスワード" id="username" class="text-input">
56            </p>
57                
58            </div>
59            <ons-button modifier="large" onclick="hideDialog('dialog1')">ログイン</ons-button>
60        </ons-dialog>
61        </ons-template>        
62    </ons-navigator>
63
64    <script src="js/app.js"></script>
65</body>
66</html>
67

javascript
1// This is a JavaScript file
2
3var showDialog = function(id) {
4  document
5    .getElementById(id)
6    .show();
7};
8var hideDialog = function(id) {
9  document
10    .getElementById(id)
11    .hide();
12};
13
14document.addEventListener("init", function(event){
15    var page = event.target;
16    var navi = document.getElementById("navi");
17    
18    if(page.matches("#index")){
19        document.getElementById("list1").addEventListener("click", function(){
20            console.log("get");
21            document.getElementById("navi").pushPage("page8.html")
22        })
23    }
24})

２．うまくいくコード

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  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19  </script>
20</head>
21<body>
22    <ons-navigator id="navi">
23        <ons-page id="page8">
24            <ons-toolbar>
25                <div class="left">
26                    <ons-back-button>Back</ons-back-button>
27                </div>
28                <div class="center">Title</div>
29            </ons-toolbar>
30            <div style="text-align: center; margin-top:100px;">
31                <ons-button class="show" onclick="showDialog('dialog1')">dialog</ons-button>    
32            </div>
33        </ons-page>
34
35        <ons-dialog cancelable id="dialog1">
36            <ons-toolbar inline>
37                <div class="center">ログイン</div>
38            </ons-toolbar>
39            <div>
40            <p>
41                <input placeholder="メールアドレス" id="username" class="text-input">
42            </p>
43            <p>
44                <input type="password" placeholder="パスワード" id="username" class="text-input">
45            </p>
46                
47            </div>
48            <ons-button modifier="large" onclick="hideDialog('dialog1')">ログイン</ons-button>
49        </ons-dialog>
50    </ons-navigator>
51
52    <script src="js/app.js"></script>
53</body>
54</html>
55

javascriptは上と同じです。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうかね。解説は後述します。

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  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19  </script>
20</head>
21<body>
22    <ons-navigator id="navi">
23
24      <ons-page id="index">
25        <ons-list-header>
26            check
27        </ons-list-header>
28        <ons-list>
29            <ons-list-item id="list1" tappable modifier="chevron">
30                <div>dialog</div>
31            </ons-list-item>
32        </ons-list>
33      </ons-page>
34
35      <ons-template id="page8.html">
36        <ons-page>
37            <ons-toolbar>
38                <div class="left">
39                    <ons-back-button>Back</ons-back-button>
40                </div>
41                <div class="center">Title</div>
42            </ons-toolbar>
43            <div style="text-align: center; margin-top:100px;">
44                <ons-button class="show" onclick="showDialog('dialog1')">dialog</ons-button>    
45            </div>
46        </ons-page>
47        
48      </ons-template>  
49
50      <ons-template id="dialog.html">      
51          <ons-dialog cancelable id="dialog1">
52            <ons-toolbar inline>
53                <div class="center">ログイン</div>
54            </ons-toolbar>
55            <div>
56              <p>
57                  <input placeholder="メールアドレス" id="username" class="text-input">
58              </p>
59              <p>
60                  <input type="password" placeholder="パスワード" id="username" class="text-input">
61              </p>
62
63            </div>
64            <ons-button modifier="large" onclick="hideDialog('dialog1')">ログイン</ons-button>
65          </ons-dialog>           
66      </ons-template>  
67      
68</ons-navigator>
69
70    <script src="js/app.js"></script>
71</body>
72</html>

JavaScript
1// This is a JavaScript file
2
3var showDialog = function(id) {
4  var dialog = document.getElementById('dialog1');
5  
6  if (dialog) {
7    dialog.show();
8  }
9  else {
10    ons.createDialog('dialog.html')
11      .then(function(dialog) {
12        dialog.show();
13      });
14  }
15};
16var hideDialog = function(id) {
17  document
18    .getElementById(id)
19    .hide();
20};
21
22document.addEventListener("init", function(event){
23    var page = event.target;
24    var navi = document.getElementById("navi");
25
26    if(page.matches("#index")){
27        document.getElementById("list1").addEventListener("click", function(){
28            console.log("get");
29            document.getElementById("navi").pushPage("page8.html")
30        })
31    }
32})

エラーが出ていたかと思いますが、出ていたエラーの意味は「一つのHTMLの中には一つのページしか含むことができませんよ」というような意味です。
ons-template内にons-pageとons-dialogの二つを入れ込んでいたかと思いますが、それが仕様上できなかったのでしょうね。
何故ons-templateではダメで、通常のファイル上に記載する方法であれば問題ないのかは正直OnsenUIの開発者でもなければ分からないのではないかと思います。

というわけでons-templateを２つ使用してとりあえず動かしましたが、そのためにダイアログの呼び出し方も多少変更しています。といっても公式リファレンスの通り記載しただけのような状態ですが・・
疑問点あれば回答にコメントください。

投稿2017/04/04 11:33