ons-splitter and page events

[Facundo Arnold]

Hi, i have problems using ons-splitter. When i click an item, then call fn.load to load page, the page is loaded but the events for the listener init or show don’t fire
Codepen:
https://codepen.io/anon/pen/gmXXxm?&editors=101

The code from tutorials page:

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

<ons-template id="home.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      Swipe right to open the menu!
    </p>
  </ons-page>
</ons-template>

<ons-template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
</ons-template>

<ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
  </ons-page>
</ons-template>

window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
};
document.addEventListener('init', function (event) {
 
    if (event.target.id === 'settings') {
        alert('init');
    }
  
}, false);

document.addEventListener('show', function (event) {
 
    if (event.target.id === 'settings.') {
        alert('show');
    }
  
}, false);

[Fran Diox]

@Facundo-Arnold You are checking event.target.id === 'settings' but you are not specifying any id in the ons-page. Just set <ons-page id="settings"> and it works.

[Facundo Arnold]

Great!!!
Thanks Fran!!

[Facundo Arnold]

Sorry Frank, another question…
When I call load method to load a new page, I need to pass an object, to initialice the page.
If i use the navigator object and pushpage method, that allows me send this object.
E.g.

document.querySelector('#myNavigator').pushPage('sponsors.html', { data: { carrera: _actualCarrera[0] } });

But I can’t use this when I try to send the object via load method
E.g.

  content.load(page, { data: { carrera: _actualCarrera[0] } }).then(menu.close.bind(menu));

The documentation of load method, tells about options object, but I dont know how use it correctly.

[Fran Diox]

@Facundo-Arnold In the Navigator you have a stack of pages where every page depends on the previous one. Thus, it allows passing data to the next page.

However, Splitter is not meant to be like that. You can change its content, but the new content shouldn’t depend on the previous one. If you need this kind of dependency, simply nest a Navigator inside SplitterContent and use pushPage, resetToPage or bringPageTop methods instead of load. Otherwise, you can have some object, “controller” or “service” common to your pages where you store the information they need to share.

[Facundo Arnold]

Perfect!. @Fran-Diox
I solved using a service object to store states and data between pages.
Thanks Again