Aky Kumar Aky Kumar - 17 days ago 10
Javascript Question

Use android back button on device to return to main view in Framework7 app?

I have recently build an app using framework7 and cordova. My app consists of a single html file which has all the views in it. To navigate between the views, a back button is present at the top on each child view.

If a person presses the back button on the device, the app will be closed.

How can i use the back button to get to the main page when im in the child pages.

I have read the router api on framework7 website but it is really confusing and does not seem to work. Here is what im trying:

<html>
<head>...</head>
<body>
...
<!-- Views -->
<div class="views">
<!-- View -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<!-- Home page -->
<div class="page" data-page="index">
<div class="page-content">
<p>Home page</p>
</div>
</div>

<!-- About page -->
<div class="page cached" data-page="about">
<div class="page-content">
<p>About page</p>
</div>
</div>

<!-- Services page -->
<div class="page cached" data-page="services">
<div class="page-content">
<p>Services page</p>
</div>
</div>
</div>
</div>
</div>
...
</body>
</html>

// Initialize App
var myApp = new Framework7();

// Initialize View
var mainView = myApp.addView('.view-main')

// Load about page:
mainView.router.load({pageName: 'about'});


Please note that i want to use the physical button found on the device to navigate to the main view when im in another div.

Please help.

Answer

If you just want to navigate to back pages,Use pushState : true in app initialization,You will be able to go back using hardware back button in framework7. If you want to open a specific page,mainView.router.load is a function in framework7. You can put a validation on router to check if page is your mainView page.By doing that you can control exiting app.when back page loads it calls the router and router gives you details about page ie: page.name,page.query. Hope this helps