Onsen 2 SPA page

ales_stritesky

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>

Fran Diox

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.

ales_stritesky

@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

munsterlander

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

ales_stritesky

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)

Zoltán Zörgő

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:

I am most likely missing something trivial…
Can you clear me up?
Thanks in advance.