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

[Flosef]

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!

[rgins16]

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.

[munsterlander]

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

[Flosef]

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

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!

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!

[Flosef]

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:

[Fran Diox]

@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 :)

[Flosef]

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

And have a great time in London.

[Flosef]

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

Thank you