Navigation to login does not work

Questions
1

I would like to have my login page and index separated, but router.navigate does not seem to bring my login page.

My my-app.js

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'TAKAI',
  // App id
  id: 'com.takai.isinocasio',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: 
  [
    {
      path: '/index/',
      url: 'index.html',
    },
    {
      path: '/about/',
      url: 'about.html',
    },
    {
      path: '/login-screen/',
      url: 'login-screen.html',
    }
  ]
  // ... other parameters
});

var mainView = app.views.create('.view-main');
mainView.router.navigate('/login-screen/');
app.loginScreen.get(".login-screen");
app.loginScreen.open(".login-screen", true);

// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
  console.log("Device is ready!");
});

// Option 1. Using one 'page:init' handler for all pages
$$(document).on('page:init', function (e) {
  // Do something here when page loaded and initialized
  console.log(e);
})

// Option 2. Using live 'page:init' event handlers for each page
$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
  console.log(e);
})

// Login Screen-Modal DOM events
$$('.login-screen').on('loginscreen:open', 
function (e) 
{
console.log('Login screen open')
});

$$('.login-screen').on('loginscreen:opened', 
function (e) 
{
console.log('Login screen opened')
});

$$('.login-screen').on('loginscreen:close', 
function (e) 
{
console.log('Login screen close')
});

$$('.login-screen').on('loginscreen:closed', 
function (e) 
{
console.log('Login screen closed')
});

my index.html

<!DOCTYPE html>
<html>
<head>
    <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *">
    <!-- Required meta tags-->
    <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 -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library CSS -->
    <link rel="stylesheet" href="lib/framework7/css/framework7.min.css">
    <link rel="stylesheet" href="css/framework7-icons.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div id="app">

        <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">

        <div class="panel panel-left panel-cover">
            <div class="page">
                <div class="page-content">
                <div class="block-title" style="text-align: center;">Leandro Gamarra</div>
                <div class="block" style="text-align: center;">
                    <img id="profile_image" src="img/leo.jpg" alt="">
                </div>
                <div class="block-title">Main View Navigation</div>
                <div class="list links-list">
                <ul>
                <li>
                <a href="/accordion/" class="panel-close">Accordion</a>
                </li>
                <li>
                <a href="/action-sheet/" class="panel-close">Action Sheet</a>
                </li>
                <li>
                <a href="/badge/" class="panel-close">Badge</a>
                </li>
                <li>
                <a href="/buttons/" class="panel-close">Buttons</a>
                </li>
                </ul>
                </div>
                <div class="block">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
                <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.</p>
                </div>
                </div>
                </div>
        </div>

        <div class="page-content">
            <div class="navbar navbar-transparent color-theme-orange">
                <div class="navbar-bg"></div>
                <div class="navbar-inner sliding">
                    <div class="left">
                        <a href="#" class="link icon-only panel-open" data-panel="left">
                            <i class="icon f7-icons if-not-md">menu</i>
                        </a>
                    </div>
                    <div class="title">TakaI</div>
                    <div class="right">
                        <a href="#" class="link icon-only">
                            <i class="icon f7-icons if-not-md">bell_fill
                                <span class="badge color-red">5</span>
                            </i>
                        </a>
                      </div>
                </div>
              </div>

              <div class="card demo-card-header-pic">
                <div style="background-image:url(img/sea.jpg)" class="card-header align-items-flex-end"></div>
                <div class="card-content card-content-padding">
                  <p class="date">Posted on January 21, 2015</p>
                  <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
                </div>
                <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
              </div>
              
          </div>
      </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
    <script type="text/javascript" src="js/my-app.js"></script>
</body>

</html>

My login-screen.html


    <div class="login-screen">
      <div class="view">
        <div class="page">
          <div class="page-content login-screen-content">
            <div class="login-screen-title">My App</div>
            <form>
              <div class="list">
                <ul>
                  <li class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-title item-label">Username</div>
                      <div class="item-input-wrap">
                        <input type="text" name="username" placeholder="Your username">
                      </div>
                    </div>
                  </li>
                  <li class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-title item-label">Password</div>
                      <div class="item-input-wrap">
                        <input type="password" name="password" placeholder="Your password">
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="list">
                <ul>
                  <li><a id="sign_in_button" class="list-button" href="#">Sign In</a></li>
                </ul>
                <div class="block-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  <p><a class="link login-screen-close" href="#">Close Login Screen</a></p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="login_screen.js"></script>

Is there something Im not understanding about routes?, how can I navigate to other html pages?

2

Have you tried app.views.main.navigate(url); ?

3

Thanks for your reply.

That gave me a “Uncaught TypeError: app.views.main.navigate is not a function”

4

You have a lot of wrong things here,

  1. view-main element should be empty
  2. panel should be a child of the app root, not in View
  3. if you want to load Login Screen using routes use Routable Modals https://framework7.io/docs/routes.html#routable-modals
1 Like
5

Thanks, I will try those fixes and I shall tell you the experience later.

6

Works perfect when implementing the fixes you said, it is not necessary to implement navigate now., when I create my main view in js, I set the default initial page.
For the login (inside app, not in view) I just toggle it.
Moved left pannel and topbar inside app.
Moved main view just inside content.
I Just left main view empty, and every link I press gets rendered in this main view.
Feels like magic really, and it has browse history even.

I dont know why the empty template for cordova had things inside main view.
Maybe was different in other versions?
Now I got to understand the flow better.