I would like to prepare a transition destination page as a separate html file in the Onsen UI and use <template> in the file.

I use Onsen UI and JavaScript templates to create SPAs in monaca.

When I transition pages with pushPage, I want to prepare another html file and use a template similar to index.html for that file, but I don't know how to do it.
If you use template in index.html, it works, but if you prepare page2.html in a different file,

Uncaught (inpromise) Error: Onsen UI HTML template must contain a single root element

This error occurs and transitions are not possible.

Code using template for index.html (move)
index.html

<!DOCTYPE HTML>  
 <html>
 <head>
 <metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- 
 scale=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">Page1</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> Page1</ons-back-button></div>
    <div class="center">Page2</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">Page2</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">Page2</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">Page2</div>
   </ons-toolbar>
   <p>pageC</p>
  </ons-page>
 </ons-template>
 </body>
</html>

Prepare page2.html in a separate file.(Not moving)
index.html

<!DOCTYPE HTML>
   <html>
   <head>
     <metacharset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-              
      scale=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-       
      event'" >
     <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">Page1</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> Page1</ons-back-button></div>
         <div class="center">Page2</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">Page2</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">Page2</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">Page2</div>
       </ons-toolbar>
       <p>pageC</p>
     </ons-page>
   </ons-template>

When you prepare page2.html in a different file, you can enclose it with , but I would like to use template for page2.html because I have to create a large number of html files.

Tried
Multiple html files and ons-template do not work
javascript html monaca onsen-ui

2022-09-30 19:56

1 Answers

I can't guarantee 100% because I haven't used OnsenUI for a long time, but I will answer.

You may have misunderstood about ons-template.

It is not like loading part of html like replace in thymeleaf.

First of all, ons-template means that you have to create a different html file as if another html file exists as "page2.html" specified in the id attribute.

So if you want to separate them into different files,

·index.html
·page2.html
·pageA.html
·pageB.html
·pageC.html

You must create five files as shown in .
(No ons-template tag is required in each file.)

And ons-template allows you to put it together into one html file.

Also, the following ideas may emerge from the above (I did).

·index.html
·page2.html

<ons-page>
   <!--Describe pageA to pageC in <ons-template> -->
</ons-page>

But this doesn't work either.
In the OnsenUI page attachment process, it appears to be generating with innerHTML, but an error occurs internally.

Therefore, it seems that you have to take one of the following shapes:

Separate files by template
If not, write it in index.html

2022-09-30 19:56

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656