3. Onsen 2 SPA page

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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>
    0
  • 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.

    0
    Z
     1 Reply

  • @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

    0 1 Reply
  • 侍

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

    0

  • 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)

    0
  • Z

    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.

    0