I’m working with svelte, and I need to go back several times instead of one using f7router.back();
How could I acheive this?
You need to pass url and force of the page you want to get back to, for example if you have the following navigation stack in your app:
/home/ → /catalog/ → /item/
To navigate back from Item to Home: f7router.back('/home/', { force: true })
2 Likes
Thanks Mr.nolimits4web.
I think the same problem but it differs a bit
So my questions is why is that when i click on the more links and navigate to the more page. Then click on the poster to go to details page. When i press back icon from the details page it goes to the previous page (more) but when i press the back from more to go back to home.I navigate back to home but the home content disappers. Yet when i press more links and go to more page and i press back to go back to home i find the content there. The problem is going to the third level of navigation
here is a summary of my code
// my frame work 7 app instance
var app = new Framework7({/my app parameters here/ });
// data class
class Data {
// method to get data here
async getMovieData() {
// fetch logic here that returns data
}
}
class UI {
constructor(app, data) {
this.data = data;
this.app = app;
}
// ui methods here
// since i have tabbed views i created view instance for each tab and initialized them separately.
// this is the instance for the main view
movies() {
this.app.views.create(‘#mymovies’, {
// on page init i ran my methods to render data for this view
on: {
pageInit: (event) => {
// since this event was firing everytime i loaded or navigated to page in this view , i added a conditional statement to ensure that the rendering logic works only the first time i load the main view page
if (event.name = “my-view-1-page-name”) {
// so i added my logic to render everything here page init for the view main
}
}
}
})
}
// like wise for view 2 but fir view 2 i wanted it to initialize once it becomes visible so i added the “initRouterOnTabShow” view parameter
shows() {
this.app.views.create(‘#myshows’, {
initRouterOnTabShow: true,
on: {
// added here page init logic just like the view 1
}
})
}
// my click handler here
clickHandler(event) {
// the first target checked if user clicked on more link which was to navigate to a router component called more
if (target.classList.contains(‘more_links’)) {
// first i get data to for that specific link and pass it to more component
// i navigate grace fully and it works.The more component dispalys movies for a specific category
app.views.current.router.navigate(‘/more/’, { props: { /* data to consume on more page here */ } });
}
// the second checked if i clicked on poster and navigated to details page
else if (target.classList.contains(‘poster’)) {
// logic to get media object here and pass it for consuming
app.views.current.router.navigate(“/movie_details/”, {props: { mediaObj }});
}
}
}
// waited for the dom content to load to kick things into gear
document.addEventListener(‘DOMContentLoaded’, () => {
var data = new Data();
data.getMovieData()
.then((data) => {
var ui = new UI(app, data)
ui.movies();
ui.shows();
return ui;
})
// Aha, that’s it for the general strucuture summary now here comes the question if you need more info about the layout pliz let me know.
// So after there i used event delegation to add event listener for all my content since it was added dynamically all in one method in the second then block below
.then((ui) => {
// i added the listener for to the view since it was a common parent container for all my views
$$(‘.view’).on(‘click’, (event) => {
ui.clickHandler(event);
});
})
})
app images here
movies main view
more page
details page
