Push <templates> from different html page.
-
So, I have two HTML page or I might have more.
index1.html && index2.html
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
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 : 
-
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.