

monacaでOnsen UI とJavaScriptテンプレートを使ってSPAをつくっています。

pushPageでページを遷移するとき、別のhtmlファイルを用意してそのファイルにindex.htmlと同じようなtemplateを使用したいのですが、やり方が分かりません。  
index.htmlでtemplateを使用すると動くのですが、page2.htmlを別のファイルで用意すると

[code]

    Uncaught (in promise) Error: [Onsen UI] HTML template must contain a single root element
    
[/code]

このエラーがでて遷移できません。

index.htmlにtemplateを使用するコード(動く)  
index.html

[code]

     <!DOCTYPE HTML>  
     <html>
     <head>
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- 
     scalable=no, viewport-fit=cover">
     <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>
    document.addEventListener("init", function (event) {
      if(event.target.id=='first-page'){
        myNavigator = document.getElementById("myNavigator");
      }
    });
    
     </script>
    
     </head>
     <body>
       <ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
    
       <ons-template id="page1.html">
       <ons-page id="first-page">
        <ons-toolbar>
          <div class="center">Page 1</div>
          </ons-toolbar>
    
          <div class="content" style="text-align: center">
          <p>This is the first page.</p>
        <ons-button id="push-button" onclick="myNavigator.pushPage('page2.html')">Push page</ons-button>
        </div>
         </ons-page>
         </ons-template>
    
       <ons-template id="page2.html">
         <ons-page id="second-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item>
          <ons-button id="push-button" onclick="myNavigator.pushPage('pageA.html')">Push page<br>A</ons-          
       button>
        </ons-list-item>
        <ons-list-item>
          <ons-button id="push-button" onclick="myNavigator.pushPage('pageB.html')">Push page<br>B</ons- 
        button>
        </ons-list-item>
        <ons-list-item>
          <ons-button id="push-button" onclick="myNavigator.pushPage('pageC.html')">Push page<br>C</ons- 
        button>
        </ons-list-item>
      </ons-list>
     </ons-page>
    </ons-template>
    
    <ons-template id="pageA.html">
     <ons-page>
      <ons-toolbar>
        <div class="left"><ons-back-button></ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>
      <p>pageAです</p>
     </ons-page>
    </ons-template>
    
    <ons-template id="pageB.html">
     <ons-page>
      <ons-toolbar>
        <div class="left"><ons-back-button></ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>
      <p>pageBです</p>
      </ons-page>
     </ons-template>
    
     <ons-template id="pageC.html">
      <ons-page>
       <ons-toolbar>
        <div class="left"><ons-back-button></ons-back-button></div>
        <div class="center">Page 2</div>
       </ons-toolbar>
       <p>pageCです</p>
      </ons-page>
     </ons-template>
     </body>
    </html>
    
[/code]

page2.htmlを別のファイルで用意する。（動かない）  
index.html

[code]

       <!DOCTYPE HTML>
       <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-              
          scalable=no, viewport-fit=cover">
         <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>
           document.addEventListener("init", function (event) {
             if(event.target.id=='first-page'){
               myNavigator = document.getElementById("myNavigator");
             }
           });
    
         </script>
    
       </head>
       <body>
         <ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
    
         <ons-template id="page1.html">
           <ons-page id="first-page">
             <ons-toolbar>
               <div class="center">Page 1</div>
             </ons-toolbar>
    
             <div class="content" style="text-align: center">
               <p>This is the first page.</p>
               <ons-button id="push-button" onclick="myNavigator.pushPage('page2.html')">Push page</ons- 
                button>
             </div>
           </ons-page>
         </ons-template>
       </body>
       </html>
    
[/code]

page2.html

[code]

     <ons-template id="page2.html">
         <ons-page id="second-page">
           <ons-toolbar>
             <div class="left"><ons-back-button>Page 1</ons-back-button></div>
             <div class="center">Page 2</div>
           </ons-toolbar>
           <ons-list>
             <ons-list-item>
               <ons-button id="push-button" onclick="myNavigator.pushPage('pageA.html')">Push page<br>A</ons-button>
             </ons-list-item>
             <ons-list-item>
               <ons-button id="push-button" onclick="myNavigator.pushPage('pageB.html')">Push page<br>B</ons-button>
             </ons-list-item>
             <ons-list-item>
               <ons-button id="push-button" onclick="myNavigator.pushPage('pageC.html')">Push page<br>C</ons-button>
             </ons-list-item>
           </ons-list>
         </ons-page>
       </ons-template>
    
       <ons-template id="pageA.html">
         <ons-page>
           <ons-toolbar>
             <div class="left"><ons-back-button></ons-back-button></div>
             <div class="center">Page 2</div>
           </ons-toolbar>
           <p>pageAです</p>
         </ons-page>
       </ons-template>
       <ons-template id="pageB.html">
         <ons-page>
           <ons-toolbar>
             <div class="left"><ons-back-button></ons-back-button></div>
             <div class="center">Page 2</div>
           </ons-toolbar>
           <p>pageBです</p>
         </ons-page>
       </ons-template>
       <ons-template id="pageC.html">
         <ons-page>
           <ons-toolbar>
             <div class="left"><ons-back-button></ons-back-button></div>
             <div class="center">Page 2</div>
           </ons-toolbar>
           <p>pageCです</p>
         </ons-page>
       </ons-template>
    
[/code]

page2.htmlを別のファイルで用意するときはで囲めばできますが、それだと大量のhtmlファイルを作らなければならないのでpage2.htmlにtemplateを使用したいです。

試したこと  
[複数のhtmlファイルとons-
templateを併用するとうまく動かない](https://ja.stackoverflow.com/questions/9368/%E8%A4%87%E6%95%B0%E3%81%AEhtml%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8ons-
template%E3%82%92%E4%BD%B5%E7%94%A8%E3%81%99%E3%82%8B%E3%81%A8%E3%81%86%E3%81%BE%E3%81%8F%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84/9393?newreg=ad56f75c893e4b3a83fff868823e4cfc)  
[ページを別ファイル化した時のons-
templateについて](https://%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E5%88%A5%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%8C%96%E3%81%97%E3%81%9F%E6%99%82%E3%81%AEons-
template%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)  
この二つのページを参考にして

[code]

    <ng-include src="page2.html"></ng-include>
    
[/code]

をbodyタグの下に書きましたが動きませんでした。

AngularやVueなどのフレームワークを使わないで動かす方法はありますか？  
よろしくお願いします。


CC BY-SA 4.0
2020-06-03T06:40:15.513
67251
2022-02-26T08:05:55.583
40456
question
javascript html monaca onsen-ui
Onsen UIで遷移先のページを別htmlファイルとして用意してそのファイルの中に<template>を使用したい。


OnsenUI使用歴が長い訳ではないため100％保証はできませんがお答えします。

`ons-template` について勘違いをされているかと思われます。（自分がそうでした）

thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まず `ons-template`
とは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html  
・page2.html  
・pageA.html  
・pageB.html  
・pageC.html

のように5つのファイルを作らなければなりません。  
（この際、各ファイル内に `ons-template` タグは不要です。）

そしてそれを1つのhtmlファイルにまとめることができるようにしたものが `ons-template` です。

また、上記から次の発想が生まれるかもしれません。（自分がそうでした。）

・index.html  
・page2.html

[code]

    <ons-page>
       <!-- この中に <ons-template> で pageA ～ pageC を記述 -->
    </ons-page>
    
[/code]

しかしこれもうまくいきません。  
OnsenUIのpageアタッチ処理内ではinnerHTMLで生成を行っているようですが、この内部でエラーとなります。

ですので、以下のどちらかの形をとらなければならないようです。

  * ファイルを分ける場合はtemplate毎に分ける
  * 分けない場合はindex.htmlに記載する


CC BY-SA 4.0
2020-06-23T06:18:13.100
67917
2020-06-23T15:49:56.100
2020-06-23T15:49:56.100
3068
40780
67251
answer