A little help with routing please

Questions
1

Hi, I’m new to FW7 and am running into a bit of an issue with routing.

I started off with a ‘tabs’ boiler plate sample app and that portion works however any new ‘routes’ I create or I should say try and navigate to wont work. The only way I can get them working is to use

app.views.main.router.navigate(’/(the route of your page)/’);

But this loads them in the main window each time so the ‘Home’ Tab gets overwritten with what ever I route to. I’m guessing this is do to me targeting ‘main’ but if I change that to say the view I create it says undefined.

I had worked with FW7 v1 and was used to just doing the

mainView.router.loadPage('about.html');

As these are just pages that I fire off some code on init.

If anyone could shed some light on why the routing is not working I would appreciate it.

Thanks.

2

Hello Michael,

It’s very hard to say without seeing some code. Could you share your code, or create a live example?

~ Nathan.

1 Like
3

Sure…

So its based off the ‘tabs’ boiler plate from github…

first I have the app.js ( I can post if you like it very standard, I didn’t change much here )

// Framework7 App main instance
var app  = new Framework7({
init: false,
root: '#app', // App root element
id: 'appName', // App bundle ID
name: 'Framework7', // App name
theme: 'auto', // Automatic theme detection
on: {
  init: function () {
  console.log('App initialized');
  createLogin();

},
pageInit: function () {


},
},

This is for the most part it, and this seems to run just fine, I also have a routes js file, again, not sure if you need the full routes file as its just the one that comes from the boiler plate but it looks like this

routes = [
{
path: '/',
url: 'index.html',
},
{
path: '/sessionList/',
url: './pages/sessionList.html',
options: {
  animate: true,
},
},
{
name: 'about',
path: '/about/',
url: './pages/about.html',
},
{
path: '/catalog/',
url: './pages/about.html',
},

One elements that is differnt is the route I hadded ‘sessionList’

Now this work, the home view is creates and everything looks good, however when I select on one of my buttons (sessionList) that will route to the sessionList page it loads into the view I’m currently on, basically overwriting the ‘home’ tab. The routing code I’m using is

 app.views.main.router.navigate('/sessionList/', {reloadCurrent: false,animate:true});

Now, this works but it hijacks the home tab… I have tried a few things based off the docs and that was to try changing the

router.navigate

to do thing like

homeView.router.navigate

or

app.homeView.router.navigate

Both of the latter do not work and throw and undefined error, however looking at the docs it would appear

router.navigate OR homeView.router.navigate

Should produce something so its a bit unclear what I am doing wrong, ultimately I just need to route to a different page, depending on the page run a specific function on the page init but not overwriting the current view each time

I hope that make sense, again I can go into more detail if needed.

Thanks!

4

In your HTML, are you calling the ‘sessionList’ page with anchor tag? If so, what is your href value?

5

Im calling it based on a click event, so when a person taps on a button, it will call the view using the app.router.navigate and on page init i call the specific function for said page.

I have not been able to actually find any documentation on how i could actually target the page via js, only inline html so i was trying to just use the route method to do this.

I had worked with V1 of fw7 and it had a method to load a page via js but it looks like that is no longer the case?

Thanks for trying to help out too, not sure what i am missing here

6

So running a few more test it looks like what may be happening is ‘default’ behavior as pages appear to be different then views in how they interact (correct me if I’m wrong here )

So in the ‘Tabs Boiler Plate’ project we have 3 ‘tabs’

Home | Catalog | Settings

Clicking on them, depending on the routes will load up ‘x’ page however if you are on the ‘home’ tab and select

‘About’ ( this is part of the boiler plate code base for index)

Code behind the about link

<ul>
            <li>
              <a href="/about/" class="item-content item-link">
                <div class="item-inner">
                  <div class="item-title">About</div>
                </div>
              </a>
            </li>
          </ul>

It will trigger the ‘about’ route

  {
path: '/about/',
url: './pages/about.html',

},

Now, when doing that you will see that the ‘home’ tab is

  1. Still active
  2. Clicking does not close the window as if the ‘route’ for the home button is ignored?

Now with that said, I simply added an ID to the home button and did a click handler on it like so

$$(document).on('click',"#homeButton",function(){
app.views.main.router.navigate('/', {reloadAll: true,animate:true})
})

Now, when they click it will navigate to the main screen and reloadAll…

With all this though I am not sure I’m doing it right as it seems like this should work by clicking on the home button unless the home ‘view’ is on a separate level of some-kind ?

7

For me it is still unclear what and where you are trying to load/show. Maybe you can show us some screenshots of what you are trying to achieve?

Tabs boilerplate contains 3 tabs, but they are not just tabs, they are Views! View - means independent router -> means each view can load pages separately from other views. When we switch tabs/views - nothing is loaded, one View just got hidden and another one became visible.