I successfully installed and configured framework7. Now I’m playing with kitchensink code, but I can’t manage to do a simple thing. I can’t make async route to work on “/” path. My sample code is going like this:
<div id="app">
<div class="statusbar"></div>
<div class="panel panel-left panel-cover">
<div class="page" data-name="/">
<div class="page-content">
<div class="block-title">Left Panel</div>
<div class="block">
<p>This is a left side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view like in <a href="#" data-panel="right" class="panel-open">Right Panel</a></p>
</div>
<div class="block-title">Main View Navigation</div>
<div class="list links-list">
<ul>
<li>
<a href="/about/" class="panel-close">About</a>
</li>
</ul>
</div>
<div class="block">
<p>Lorem ...</p>
<p>Duis ...</p>
</div>
</div>
</div>
</div>
<div class="view view-main view-init ios-edges" data-url="/">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title sliding">Application</div>
</div>
</div>
<div class="page-content">
<div class="row"> </div>
<div class="row">
<div class="col-100 text-align-center">
<div class="preloader color-orange"></div>
</div>
</div>
<div class="row">
<div class="col-100 text-align-center">
<div class="color-orange">Loading ...</div>
</div>
</div>
</div>
</div>
</div>
</div>
My application.js is going like this:
myApp = new Framework7({
id: 'io.framework7.test',
root: '#app',
theme: 'auto',
data: function () {
return {
user: {
firstName: 'John',
lastName: 'Doe',
},
};
},
methods: {
isLogged: async function () {
return false;
},
},
routes:[{
path: '/',
async(routeTo, routeFrom, resolve, reject) {
debugger
let self = this;
let app = self.$app;
return app.isLogged()
.then(is_logged => {
if (!is_logged) {
debugger
resolve({ url: './pages/login.html' });
}
else {
resolve({ url: './pages/main.html' });
}
});
}
}
],
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
Does anyone notice what’s wrong? Thank you!