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.

Styleguide tips for Onsen UI and vanilla JS

  • Hi,

    Ive used goratchet before and thought Id try Onsen UI now. Looking at the docs and trying a small pice of the tutorial Im stuck in the following. When creating a ons-page and initiating it, how do I go about initiating a lot of JS files for a single page? In my case its regarding a game which Ive split up in 6 or 7 different JS files for readability. How do I go about initiating all these 6-7 different JS files in a single “document.addEventListner”? The tutorial code is as per below.

    document.addEventListener('init', function(event) {
      var page =;
      if (page.matches('#helloworld-page')) {
            //How do I initiate multiple JS files here? 



  • @peter Well you don’t really initiate your files per se. I always say, think of your app as one giant single page website. All you need to do is include your files with script tags and they are there for your use. If you need to dynamically load them due to size, then just use some JS to do that. Both options are detailed here:

    Edit: I should also say, the event listener should be used to register when elements are added to the DOM so you can manipulate (work, do things, etc) them with JS.