Onsen 2 SPA page



  • Hi, I develop using JQM and now I would like to try Onsen UI framework.
    I prefer developing using SPA, but I don’t know, how it creates using Onsen 2 beta.

    I copied this code from

    http://codepen.io/onsen/pen/yrhtv

    and paste to downloaded code from OnseUI website. If I run this code I can see

    Uncaught ReferenceError: myNavigator is not defined

    Can anybody help me with this?

    Thanks

    my code

    
    <!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 2.0 Quickstart</title>
    
        <script src="components/loader.js"></script>
        <script src="lib/onsenui/js/onsenui.js"></script>
    
        <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
    
        <style>
          .page__content {
            margin: 50px;
          }
        </style>
    </head>
    
    <body>
       <ons-navigator title="Navigator" var="myNavigator">
      <ons-page modifier="material">
        <ons-toolbar modifier="material">
          <div class="center">Onsen UI 2.0 Quickstart</div>
        </ons-toolbar>
    
        <p>This is a simple app that showcases some of the features of Onsen UI 2.0</p>
    
        <p>The following app shows some of the new Material Design components that have been added.</p>
    
        <p>Onsen UI 2.0 is, unlike the previous version, not dependant on AngularJS. This means that it can easily be integrated with other frameworks.</p>
    
        <ons-button onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )" modifier="material--flat">
          <ons-ripple color="rgba(0, 150, 136, 0.1)"></ons-ripple>
          React.js Demo
        </ons-button>
    
        <p>Onsen UI 2.0 also provides iOS-like flat design, just like Onsen UI 1.x.</p>
    
        <ons-button onclick="myNavigator.pushPage('page3.html', { animation : 'slide' } )" modifier="material--flat">
          <ons-ripple color="rgba(0, 150, 136, 0.1)"></ons-ripple>
          Flat Design Demo
        </ons-button>
      </ons-page>
    </ons-navigator>
    
      <ons-template id="page2.html">
      <ons-page modifier="material">
        <ons-toolbar>
          <div class="left">
            <ons-back-button>Back</ons-back-button>
          </div>
          <div class="center">Page 2</div>
        </ons-toolbar>
    
        <div style="text-align: center">
          <br />
          <ons-button modifier="light" modifier="light" onclick="myNavigator.pushPage('page3.html', { animation : 'slide' } )">
            Page 2
          </ons-button>
        </div>
      </ons-page>
    </ons-template>
    
    <ons-template id="page3.html">
      <ons-page modifier="material">
        <ons-toolbar>
          <div class="left">
            <ons-back-button>Back</ons-back-button>
          </div>
          <div class="center">Page 3</div>
        </ons-toolbar>
    
        <div style="text-align: center">
          <br />
          <ons-button modifier="light" modifier="light" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
            Page 3
          </ons-button>
        </div>
      </ons-page>
    </ons-template>
    
    </body>
    </html>
    
    

  • Onsen UI

    Hello! Welcome to Onsen UI community :)

    I think you are mixing things of Onsen UI 1.x (from that codepen example) with Onsen UI 2.0.
    var attribute only works if you include AngularJS in your project, but I think you are going with Vanilla JS, right?
    Remove var attributes and use id instead. To get the elements you can do document.querySelector('#myNavigatorID').pushPage(...) and so on.



  • @Fran-Diox said:

    document.querySelector(’

    Hello Fran,

    thank you for your help, I would like to load Jquery library later. Your example works, now I am trying it with JQuery syntax.

    Regards



  • @ales_stritesky Is there a specific reason you are wanting jQuery over vanilla?



  • Hi munsterlander,
    there are many reasons

    • I am lazy :blush:

    • I work with Jquery library for a long time

    • I’ve done many projects with this library

    • Jquery version > 2 is much more faster than older versions (in my opinion)



  • Hello @Fran-Diox!

    I am newbie in this field. I am experimenting with Onsen UI 2.0 on Monaca with the same sample app as OP. I got to solve the same “issue” before getting here, so I am able to to call pushPage. But: while the original location.href='angular/material.html' works document.getElementById('my-navigator').pushPage('angular/material.html') loads the page, but without applying angular template:
    0_1458076405740_push.PNG
    I am most likely missing something trivial…
    Can you clear me up?
    Thanks in advance.


Log in to reply