I'm new! Onsen 2.0 questions

[Dan]

Hello all,

I’m really enjoying working with Onsen and have a few questions I hope someone can answer.

1. I added an “init” event listener to be able to bind element events when a page is initialized. I was wondering :
   When a page is popped out of the stack, what exactly happens to the page? Do all the events get unbinded to free up memory? Do I have to rebind events if the page is re-called?

2. Should all the javascript files for each page be loaded at once when the app starts? Or placed in each individual page somehow?

3. Do all html pages need to have the ons-navigator component for navigation? Or can the ons-navigator be placed only on the startup page?

4. Since Onsen 2.0, I don’t need to use angular. Could someone recommend a good lightweight 2 way binding framework?

Thanks everyone!
Daniel

[munsterlander]

Welcome @Dan! These are just my opinions regarding your questions:

1. I would think the event listener remains. The elements are just removed from the DOM. As far as best practice goes, you should always remove listeners if they are no longer needed.

2. You can load JS when you need it, but you get errors if you try to add them to the template pages, so you will do this all through your index.html.

3. No (depends on your navigation model). In general, its one navigator on the index.html that you push pages too.

4. I am the wrong guy for this because I believe in Vanilla JS all the way. No frameworks for me! Just use a listener to update your data.

Hope this helps you with your endeavor and please feel free to ask away!

Mark

[Fran Diox]

Welcome aboard @Dan ! Glad you have you here :)

I’ll try to answer your questions:

1. You didn’t add the init event listener to ons-page itself, right? You added it to the document or perhaps another parent component. Therefore, page removal has nothing to do with that event listener. You can remove it manually if you consider you don’t need it anymore. Anyway it should be just 1 listener. You can check this code to see an example.

2. For now JavaScript files should be included in index.html always until ES6 has better support. This is rather an HTML/JavaScript limitation than anything related to Onsen UI.

3. Not at all. ons-navigator is just one of the “navigation components” (navigator, tabbar, splitter) in Onsen UI and in general you need only one (normally located in index.html as the first element, but it depends on your app). Let’s say these navigation components are “frames” that are able to change their inner content. What you need to define in the html pages is precisely that content in the shape of different ons-page. So basically, you can think in ons-page as the minimum unit of these navigation components, although it’s also possible to load a navigation component inside another one.

4. I found some time ago Bind.js but I haven’t tried it out myself. It would be great if you want to try it and comment here your experience. Apart from that, I think Vue.js plays nicely with Onsen UI and has two-way bindings if I’m not wrong.

Hope this helps :grin:

–

@munsterlander Looks like I’m too slow answering… hahah

[munsterlander]

@Fran-Diox HA! I am just glad my answers match yours for the most part! Always good when what I say matches up with the devs! Thanks for pointing out those two libraries, I am going to give them a look as I have one project where it could be of use instead of doing my normal manual listener model.

[Dan]

Thank you both for your helpful responses!

Fran, I added the init event listener to the document yes, I use the init event listener to instantiate a plugin or bind events to a specific page once it’s done loading. Ex :

    document.addEventListener("init", function (e) {
        if (e.target.id == "schedule") {
            $('.inputDate').mobiscroll().date({ theme: 'ios', minDate: new Date(), dateFormat: 'yy-mm-dd' });
        }
    });

Is this the correct approach?
From what I am understanding, once a page is popped out, the event listeners remain and need to be manually removed.

Dan

[munsterlander]

@Dan You are correct!