Router problem, content not being rendered, what am I missing?

Questions
1

I am testing framework7, no React or Vue involved, just framework7. I followed the intro but I am missing something because even though the click even is triggered, I am not seeing the change in views.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar (Android only) -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>Grocery Monkey App</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.5.2/css/framework7.bundle.min.css">
    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
    <body>
        <!-- App root element -->
            <div id="app">

              <!-- Your main view, should have "view-main" class -->
              <div class="view view-main">
                <!-- Initial Page, "data-name" contains page name -->
                <div data-name="home" class="page">

                  <!-- Top Navbar -->
                  <div class="navbar">
                    <div class="navbar-bg"></div>
                    <div class="navbar-inner">
                      <div class="title">Grocery List</div>
                    </div>
                  </div>

                  <!-- Bottom Toolbar -->
                  <div class="toolbar toolbar-bottom">
                    <div class="toolbar-inner">
                      <!-- Toolbar links -->
                      <a href="#" class="link">Link 1</a>
                      <a href="#" class="link">Link 2</a>
                    </div>
                  </div>

                  <!-- Scrollable page content -->
                  <div class="page-content">
                    <p>Page content goes here</p>
                    <!-- Link to another page -->
                    <a href="./about/">About app</a>
                  </div>
                </div>
              </div>
            </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.5.2/js/framework7.bundle.min.js"></script>
        <script async src="/js/main.js"></script>
  </body>
</html>

/* Main JS Main JS */
var app = new Framework7({
  root: '#app',
  name: 'Grocery Monkey',
  id: 'mobi.grocerymonkey',
  serviceWorker: {
    path: './../sw.js',
    scope: '/'
  },
  routes: [
    {
      name: 'about',
      path: '/about/',
      templateUrl: './pages/about.html',
      on: {
        pageInit: (e, page) => console.log(page),
        pageAfterIn: (e, page) => console.log(page)
      }
    },
    {
      name: '404',
      path: '(.*)',
      url: './pages/404.html'
    }
  ]
});

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

I also tried changing the router url to content, but I still don’t see the content

2

to

<a href="/about/">About app</a>

3

@shastox you can’t tell, but I am doing a facepalm right now… thanks. I read an article on some blog that did it like that, but had forgotten all about it.

It works with the content, but changing it back to url: ‘/pages/about.html’ still gives me the same result, content of about.html isn’t loaded?

When I inspect the DOM, I can see that the markup from the first page is injected twice. But the content from about.html is not used

4

Check your browser console, maybe there are some errors?

5

No, I don’t see any errors, everything is loading fine, I can even see the these

on: {
pageInit: (e, page) => console.log(page),
pageAfterIn: (e, page) => console.log(page)
}

being triggered when I click the link, the about.html file is being loaded but not shown anywhere

6

Check Nerwork tab in dev tools and see what actually loaded form requested path

7

It does, I see pages/about.html being requested
12

8

And what is in about.html actual response ?

9

This is the content

<div class="page">
        <div class="page-content">
          <div class="block">
            <p>This page created dynamically</p>
          </div>
        </div>
      </div>

And from the console

33
Screen Shot 2019-12-20 at 14.44.33.png782×481 59.7 KB

10

Then all should work. I guess something simple is missing. Do you have live example with the issue?

11

All files are here https://gist.github.com/kristiannissen/e68a46e1ebd52aa9cecf4dfc15963ecb

12

I change from ParcelJS to Webpack and somehow that did the trick

13

You should mention that you were using ParcelJS