I will try to take a look tonight and see if I can help you.
@pvtallulah thanks for that but, at this point, I’m suspecting a bug.
At the end of the .view .view-main there’s a ‘data-url=’ and what ever is in that string is what gets loaded first no matter what startURL or async() is specified. If you remove data-url from the div then absolutely nothing gets loaded.
Here’s what I know:
- async() only gets called when navigating BACK to the home page, it doesn’t get called before the page is loaded.
- startURL get’s ignored in the app init
- data-url=’’ attached to view-main takes precedence
- you can’t use page:mounted to intercept and then load a new page via
app.views.main.router.navigate(’/onboarding/’); parts of the home page are already visible anyway - before app instance is initialized with Framework7 you can override the routes[0].url with the desired url and get the correct page loaded and after that page is loaded restore routes[0].url with its original value but that breaks any link navigation to href=’/’ but you can navigate to any other page and then back to ‘/’ as that appears to be handed by the async() code.
Unless, there’s a bug in my code, which I admit is a real possibility, this functionality as you and Vladimir outlined early on, is broken.
Please post whole related HTML and JavaScript code: your initial views layout, your app and views init
about 5 posts back on Dec 20 at 5:59p I provided a link to a git that has everything (I figured that would be easier).
You have both async and url on your route, only one at a time can be used, no sense to use both
There is no such url app parameter
It is not supported because there is no sense to load something just load then something different. There is route’s beforeEnter hooks for this case to prevent page loadings
You have both
asyncandurlon your route, only one at a time can be used, no sense to use both
Doesn’t matter. Doesn’t work either way.
There is no such
urlapp parameter
StartPage/StartURL is a variable as you suggested. Variable gets ignored as does hard coding a path or url
It is not supported because there is no sense to load something just load then something different. There is route’s beforeEnter hooks for this case to prevent page loadings
If async only gets called when returning to ‘/’ and not before ‘/’ is loaded then there needs to be some mechanism to override this on the first pass.
I spent a lot of time trying to figure this out, I’ve tried all I can find to try and tried your and @pvtallulah’s suggestions. I’ve read the docs and scanned the forums. If it doesn’t work then please tell me. If it does work then please show me how to make it work.
just test your code,
the only thing i did was comment the url line on route
{
path: '/',
// url: './pages/home.html',
}
then, every time async is called, at ferst load, going back also.
i dont understand your problem.
i test it on chrome
Taking the raw kitchen-sink project and making the following change to the end of the app.js file like this:
// Dom7
var $ = Dom7;
// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
// Init App
var app = new Framework7({
id: 'io.framework7.testapp',
root: '#app',
theme: theme,
data: function () {
return {
user: {
firstName: 'John',
lastName: 'Doe',
},
};
},
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
},
},
routes: routes,
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
var startUrl = '/action-sheet/';
var wasLoggedIn = false;
var isLoggedIn = false;
if (wasLoggedIn) startUrl = '/accordion/';
if (isLoggedIn) startUrl = '/';
//init view
var mainView = app.views.create('.view-main', {
// specify which route to load on view init
url: startUrl
});
Does not work. If you set a breakpoint on the first if statement, when the debugger breaks the default page is already loaded. Setting the view like I did does not work and since (it certainly seems to me) I need to wait on app to be initialized before I use it, this this would be the correct way.
To make this to work:
var startUrl = '/action-sheet/';
var wasLoggedIn = false;
var isLoggedIn = false;
if (wasLoggedIn) startUrl = '/accordion/';
if (isLoggedIn) startUrl = '/';
//init view
var mainView = app.views.create('.view-main', {
// specify which route to load on view init
url: startUrl
});
as i stated above it is required to:
- remove
view-initclass from main view in index.html - remove all
data-attributes from main view in index.html - remove internal/inline/default page from main view in index.html
Here is a working git that is fully documented and works perfectly.
(Once you actually stop trying to use resolve, life gets a whole lot easier!)
Thanks for all your help! Now to get font-awesome to work! 
1 Like
Will this open the index.html for a short while or will it take straight to the other html pages based on code logic?
@Karanveer_Singh I ended up going to the following method:
// Index page
{
path: '/',
name: 'home',
on: {
pageBeforeIn: () => {console.log("home page init - from routes"); }
},
redirect: function (route, resolve, reject) {
if (appInfo.firstTime == true)
{
// new user so welcome them
console.log("rerouting to welcome screen");
$$('.navbar').hide();
$$('.toolbar-bottom').hide();
appInfo.startPage = '/welcome/';
resolve(appInfo.startPage);
}
else if(userInfo.state == false)
{
// not logged in but has been
console.log("rerouting to signin/welcome back screen");
$$('.navbar').hide();
$$('.toolbar-bottom').hide();
appInfo.startPage = '/signin/';
resolve(appInfo.startPage);
}
else
{
// just doing normal stuff here
console.log("rerouting to actual home page");
StatusBar.show();
$$('.navbar').show();
$$('.toolbar-bottom').show();
appInfo.startPage = '/home/';
resolve(appInfo.startPage);
}
}
},
It never flashes the index.html page and always loads the appropriate page based on the conditions I test for.
1 Like
I tried it. But, it doesn’t log any of these lines. Neither pageBeforeIn nor inside redirect function, even if I put the console line before the logic. What could I be doing wrong?
You probably still have the home page in your index.html… you have to strip all that out.
Mine looks like this:
<div id="main" class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">
so, i checked the latest documentation and made some changes here and there and it has worked. Need to implement the logic yet, but I think it should be doable now. This worked
If you’re using the git code, I never could get that to work correctly… I need to update the git code with the method I sent you a few posts back.
(and yes, I think that’s an F7 bug too (several actually) but I’m sure Vladimir will get too it.)
1 Like
@Karanveer_Singh The git code is updated. I changed the old method to the one I posted on March 9th AND I removed the transition as that too creates problems. All changes are in the routes.js. This is working in two code bases.
1 Like
yes, I have done that now. I am also using redirect function with empty div(view-main) in index.html. It’s working. Thanks!!!
1 Like
Awesome! Glad it works!