Monaca Onsen UI Discord Chat Github Repo

Push <templates> from different html page.



  • So, I have two HTML page or I might have more.

    index1.html && index2.html
    0_1555415365011_Screen Shot 2019-04-16 at 9.47.18 PM.png
    0_1555415371517_Screen Shot 2019-04-16 at 9.47.32 PM.png

    How do I use push functionality to go to another template which is located in another HTML?
    In this scenario, I want to go to <template id =guide.html > in index2.html from <template id =“Library.html”> in index1 as soon as you hit the <ons-card>. Also, will I be able to go back if I click the <ons-back-button>? Are they doable?

    index1.html

    <!DOCTYPE html>
    <html>
    <head>
          <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
      <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    
            <ons-navigator id="appNavigator" page="Library.html" swipeable swipe-target-width="80px">
    
    </ons-navigator>
    </head>
        
    <body>
    
    
    <template id="Library.html">
      <ons-page> 
         <div style="background-color: white">
      
    <!--  -->
        <ons-card onclick="fn.pushPage({'id': 'guide.html', 'title': 'CE_sub'})" style="height: 500px;">
          
          <div id="card1"></div>
         <br>
         <div class="title" style="font-weight: 500">Go to guide.html</div>
          <div class="content" style="font-family: sans-serif; font-size: 18px; font-weight: 100;" >Can you answer my question</div>
        <br>
            
    
        </ons-card>
          </div>
        </ons-page>
        </template>
        
        <template id="guide.html">
      <ons-page> 
         <div style="background-color: white">
      
    <!--  -->
        <ons-card>
          <ons-back-button>index1.html</ons-back-button>
          <div id="card1"></div>
         <br>
         <div class="title" style="font-weight: 500">Hello world</div>
          
        <br>
            <div style="color: gray">Read more...</div>
    
        </ons-card>
          </div>
        </ons-page>
        </template>
    </body>
        
        <script>
            window.fn = {};
    
    window.fn.toggleMenu = function () {
      document.getElementById('appSplitter').right.toggle();
    };
    
    window.fn.loadView = function (index) {
      document.getElementById('appTabbar').setActiveTab(index);
      document.getElementById('sidemenu').close();
    };
    
    window.fn.loadLink = function (url) {
      window.open(url, '_blank');
    };
    
    window.fn.pushPage = function (page, anim) {
      if (anim) {
        document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title }, animation: anim });
      } else {
        document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title } });
      }
    };
        </script>
    </html> 
    
    

    it is supposed to look like this
    0_1555415285668_Screen Shot 2019-04-16 at 9.47.18 PM.png

    index2.html

    <!DOCTYPE html>
    <html>
    <head>
        
          <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
      <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    </head>
    <body> 
     <template id="guide.html">
      <ons-page> 
         <div style="background-color: white">
      
    <!--  -->
        <ons-card>
          <ons-back-button>index1.html</ons-back-button>
          <div id="card1"></div>
         <br>
         <div class="title" style="font-weight: 500">Hello world</div>
          
        <br>
            <div style="color: gray">Read more...</div>
    
        </ons-card>
          </div>
        </ons-page>
        </template>
        
    
    </body>
       
    </html> 
    
    It is supposed to look like this :
    ![0_1555415325063_Screen Shot 2019-04-16 at 9.47.32 PM.png](https://i.imgur.com/pJw4FmO.png) 
    

  • administrators

    There are only two ways of defining pages for ons-navigator:

    1. Define a template within the same file as the navigator
    2. Define a page in its own file (not in a template). There can only be one page per file.

    The problem you have here is that you are trying to define a template within a file, but it’s not the same file as the one ons-navigator is defined in. It is not possible to have this work with ons-navigator.

    Instead what you should do is move each template in index2.html to its own separate file. Then you will be able to push to ons-navigator by passing the name of the file.