Push <templates> from different html page.

CodeyMonk

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)

emccorson

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

Define a template within the same file as the navigator
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.