ons-tabbar - pages getting initialised multiple times. Why?



  • Using RC 2.0.0

    Hello,

    I’am working hard on this for 2 days and I don’t get a solution.

    When I run the following code, all pages defined in the ons-tabs are getting initialized 2 times.

    Index.html

    <ons-navigator var="indexNavigator" page="html/view-index.html"></ons-navigator>
    

    html/view-index.html

    <ons-page id="view-index">
    
      <ons-tabbar class="btm-toolbar">
        <ons-tab page="html/view-page1.html" label="page1"></ons-tab>
        <ons-tab page="html/view-page2.html" label="page2"></ons-tab>
        <ons-tab page="html/view-page3.html" label="page3"></ons-tab> 
      </ons-tabbar>
    
    </ons-page>
    

    html/view-page1.html / the others look the same

    <ons-navigator var="page1Navigator" animation="slide">
    
        <ons-page id="view-page1">
            
        </ons-page>
    
    </ons-navigator>
    

    I catch the Init

    document.addEventListener("init", function(e) {
         console.log(" INIT",e.target.id);
    }
    

    Console says:

    INIT view-index
    INIT view-page1
    INIT view-page2
    INIT view-page3
    INIT view-page1
    INIT view-page2
    INIT view-page3
    

    When I load it several times the order can change. For example:

    INIT view-index
    INIT view-page2
    INIT view-page1
    INIT view-page3
    INIT view-page2
    INIT view-page1
    INIT view-page3
    

    If you have any idea pls share with me.
    Thank you!



  • Are you using Angular? Are you doing ng-controller=“yourController” more than once? If you did ng-controller twice than the init event would happen twice.



  • @Flosef Also, what platform is this happening on, Android or iOS?



  • @rgins16 & @munsterlander
    Thank you very much for your input. I tried several things but I don’t understand why it is not working.

    I will give some more information, perhaps you see something.

    I don’t use angular. Just jQuery:

    <script src="lib/jquery/jquery-2.2.2.min.js"></script>
    <script src="lib/onsenui/js/onsenui.js"></script>
    

    On Chrome it looks good but in Firefox (both Mac) it goes crazy! The init fires multiple times:
    0_1474894326925_Bildschirmfoto 2016-09-26 um 14.43.00.png

    And something interesting too:
    In Firefox my tab-bar icons are not shown! It just shows the cloud Icon and when I look in the source there is the cloud icon added, but I never did it. Seems like onsen is adding it. In Chrome everything is fine!
    0_1474894429444_Bildschirmfoto 2016-09-26 um 14.48.32.png

    Something more interesting:
    When I have only one tab in the tabbar, the init just fires once. As soon as I have two or more tabs, the init fires multiple times.

    Init fires once
    <ons-page id="view-index">
    
      <ons-tabbar class="btm-toolbar">
        <ons-tab page="html/view-page1.html" label="page1"></ons-tab>
      </ons-tabbar>
    
    </ons-page>
    
    Init fires multiple times for pages that have already been initilalised
    <ons-page id="view-index">
    
      <ons-tabbar class="btm-toolbar">
        <ons-tab page="html/view-page1.html" label="page1"></ons-tab>
        <ons-tab page="html/view-page2.html" label="page2"></ons-tab>
      </ons-tabbar>
    
    </ons-page>
    

    Once again I’am thankfull for any Idea!



  • Can someone please confirm this:

    When I use the “toDo” example from the official example page (https://onsen.io/samples/)
    it runs with RC16.

    When I replace it with 2.0.0 and observe the INIT event I see similar problems in Firefox:
    0_1474900062628_Bildschirmfoto 2016-09-26 um 16.27.22.png


  • Onsen UI

    @Flosef Looks like this is all related to some issue in the polylfill we are using for CustomElements. We are away now for Angular Connect in London, we’ll fix it as soon as we can :)



  • @Fran-Diox
    Would be amazing.Looking forward to it. Thank you!

    And have a great time in London.



  • @Fran-Diox
    Was hoping for a fix in 2.0.1 but there is none. Any plan when this will work?!

    Thank you


Log in to reply