Framework7 Routing Method not working with Static onclick event


#1

I want to navigate to another page upon tapping on a swiper slide. The slide updates a variable and should then also open about page. The method on API pages uses: router.navigate(’/about/’); I have set up all routes in my app.js file. This is the element that should navigate:

<div id="myElement" onclick="router.navigate('/about/');" dmx-on:click="var_season.setValue(id)"></div>

Here are my routes:

routes: [
    {
    path: '/',
    url: './index.html',
    options: {
      animate: true,
    },
    name: 'home',
  },
  // About page
  {
    path: '/about/',
    url: './pages/about.html',
     options: {
        animate: true,
      },
    name: 'about',
  },
    {
    path: '/stats/',
    url: './pages/stats.html',
     options: {
        animate: true,
      },
    name: 'stats',
  },
    {
    path: '/moments/',
    url: './pages/moments.html',
     options: {
        animate: true,
      },
    name: 'moments',
  },
    ]
});

The normal href="/about/" works but when I use it on slider the href opens the pages on swipe gesture and I only want it to open on tap/click.

Does app connect prevent this onclick to navigate for some reason?


#2

Just a update here @George and @patrick:

I went to check what I did in previous app dev and the following definately worked:

onclick=“app.router.navigate(’/path/’);”

Not working with current version


#3

Ok, seems this is only broken inside the swiper component. Did not test everything, but were able to use same type of link outside swiper and it worked


#4

Framework 7 version 2 onclick works


#5

I tested it and the clicks work fine in all versions. Seems that the router API from Framework 7 is different in version 2 and 3. In version 3 the router should be accessed from the view instead of the app.

For version 3:

In your app.js first initialize the view

var mainView = app.views.create('.view-main');

then the router navigate is called as

onclick="mainView.router.navigate('/path/')"

#6

Thanks @patrick - works!