0

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

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

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

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

index.htmlにtemplateを使用するコード(動く)
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, 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>

page2.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, 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>

page2.html

 <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>

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

試したこと
複数のhtmlファイルとons-templateを併用するとうまく動かない
ページを別ファイル化した時のons-templateについて
この二つのページを参考にして

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

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

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

1 件の回答 1

1

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

<ons-page>
   <!-- この中に <ons-template> で pageA ~ pageC を記述 -->
</ons-page>

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

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

  • ファイルを分ける場合はtemplate毎に分ける
  • 分けない場合はindex.htmlに記載する
1
  • やはり分けたHTMLファイルにons-templateを使うことはできないのですね。 詳しく教えていただきありがとうございました。
    – torayaki
    Commented 2020年6月24日 15:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。