K
@Fran-Diox Sorry, couldn’t respond the last two days…
The app is actually way bigger, with a lot more sites.
I don’t really have a root template I think.
I use a splitter like that:
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<!-- More list items -->
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content">
<ons-navigator swipeable id="myNavigator" page="login.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
So my first page is the “login.html” which has a login-button of course which when clicked pushes the “home.html”.
Login.html:
<template id="login.html">
<ons-page id="login">
<div class="page-wrapper">
<ons-row class="header">
<ons-col>
<span class="tte-font">My App</span>
</ons-col>
</ons-row>
<ons-row><ons-input id="email" modifier="underbar" placeholder="E-Mail" float></ons-input></ons-row>
<ons-row><ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input></ons-row>
<ons-row><ons-button id="login-button" modifier="large">Login</ons-button></ons-row>
</div>
</ons-page>
</template>
app.js:
document.addEventListener('init', function(event) {
var page = event.target;
if (page.id === 'login') {
page.querySelector('#login-button').onclick = function() {
loadingModal(true);
// verify credentials and stuff then do:
document.querySelector('#myNavigator').resetToPage('home.html'); // I use "resetToPage" so the user can't go back to the login page
}
}
}
The example you posted is working. If I expand it with a splitter like mine and a login page etc. it’s also working.
Since I don’t get en error message on my app, I’m a little at a loss where to start debugging. I just know, that my page works if I remove the tabbar, which is kind of odd.
I also would love to post the whole app, but it’s actually really large already and not really refined yet.
