Page and tab DOM events in routable tab templates

1

I have my app and pages structure setup as a main page with 3 tabs and 2 side panels (left and right). The panels and tabs are defined as routable panels and routable tabs. This is all working. All of these have their own component file (f7.html) templates:

  • home.f7.html (contains the routable tabs definitions)
  • tab-one.f7/html (contains a block div with the contents for tab 1)
  • tab-two.f7/html (contains a block div with the contents for tab 2)
  • tab-three.f7/html (contains a block div with the contents for tab 3)

When I add a script tag in these templates and define export default for ‘data’, ‘methods’ and ‘on’ in them I observe these behaviors:

  • home.f7.html: receives pageInit and tabShow events.
  • tab-one.f7.html: does not receive pageInit and tabShow events.

If in tab-one.f7.html I use @page:init=“some_method” and define “some_method” in ‘methods’ of this template, the custom method is never called.

So how can I catch a tabShown (or other dom event) in tab-one.f7.html ? The main goal would be to update ‘data’ defined in the tab template so the contents of the template can be updated.
Or can I refer to ‘data’ from home.f7.html template inside the tab templates, like “{{home.data.foo}}”?

Also event handling doens’t seem very consistent in F7… (one time you get event objects other times you get actual page or panel objects :confused:

2

It will never have page:init because it is not a Page.
tab:show won’t trigger also because tab’s content is not a Tab. You can use component’s mounted hook to know when it was added to DOM or listen for tab:show event on parent Tab

It is consistent but depends on type of event, if it is a DOM event then it will be an event object.