Monaca Onsen UI Discord Chat Github Repo

Multiple files - Tutorial - not work



  • Hello Friends

    I´m new in framework. I have started the tutorial on this page (https://onsen.io/v2/guide/tutorial.html#multiple-files).
    My goal is navigate between many files. If I can do it so I will adapt my App. But I need navigate between more than one page. This part of this tutorial explain how can I do it. I follow the instructions but this does not work.

    According to the tutorial:
    This brings up an important point: Onsen UI pages can be defined either as templates using the template element, or in their own file. When we call ons-navigator.resetToPage with home.html as the argument, the navigator looks in the current file for templates with id=“home.html”, and then looks for files called home.html. This is why nothing broke when we moved the home page out of a template and into its own file.

    My files
    First html file.******************************
    <!DOCTYPE html>
    <html lang=“en”>
    <head>
    <meta charset=“utf-8” />
    <meta name=“apple-mobile-web-app-capable” content=“yes” />
    <meta name=“mobile-web-app-capable” content=“yes” />
    <meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
    <link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
    <link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
    <script src="https://unpkg.com/onsenui"></script>
    

    <script>
    const login = () => {
    const username = document.querySelector(’#username’);
    const password = document.querySelector(’#password’);
    if (true) {
    // call the navigator to move to the new page
    const navigator = document.querySelector(’#navigator’);
    navigator.resetToPage(‘home.html’);
    } else {
    ons.notification.alert(‘Wrong username/password combination’);
    }
    }
    </script>
    </head>
    <body>
    <ons-navigator id=“navigator”>
    <ons-page>
    <div style=“text-align: center; margin-top: 200px”>
    <p>
    <ons-input id=“username” placeholder=“Username” modifier=“underbar”></ons-input>
    </p>

                <p>
                    <ons-input id="password"
                               placeholder="Password"
                               type="password"
                               modifier="underbar">
                    </ons-input>
                </p>
    
                <p>
                    <ons-button onclick="login()">Sign in</ons-button>
                </p>
            </div>
    
        </ons-page>
    </ons-navigator>
    

    </body>
    </html>

    Second html file.******************************

    <!DOCTYPE html>
    <html lang=“en”>
    <head>
    <meta charset=“utf-8” />
    <meta name=“apple-mobile-web-app-capable” content=“yes” />
    <meta name=“mobile-web-app-capable” content=“yes” />
    <meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
    <link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
    <link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
    <script src="https://unpkg.com/onsenui"></script>
    

    </head>
    <body>
    <ons-page id=“home”>
    <ons-toolbar id=“home-toolbar”>
    <div class=“center”>Home</div>
    </ons-toolbar>

        Hello!
    </ons-page>
    

    </body>
    </html>


  • administrators

    The second file should just contain this and nothing more:

    <ons-page id=“home”>
    <ons-toolbar id=“home-toolbar”>
    <div class=“center”>Home</div>
    </ons-toolbar>
    
        Hello!
    </ons-page>