[v7 core] Auto initialize views based on responsive store

1

Feels like I am missing something obvious :slight_smile: My view does not auto-initialize once it becomes visible by a responsive store property.

My app root component is like this:

<template>
  ${$store.getters.init.value ? $h`
    
    <div class="view view-init" data-name="view-welcome" data-url="/welcome"></div>

  ` : $h`

    <div class="view view-init">
      Loading...
    </div>

  `}
</template>

In my startup routine, once basic data is loaded from the API, I update the store:

store.state.init = true

This works, as the welcome view is displayed, but it is not auto-initialized as I would expect, and the route /welcome is not loaded. (component not loaded by XHR and view stays empty) No errors on the console.

Do I have to manually initialize it? And if yes, what is the right moment. In the past I did this using a callback on the setState method, to be sure that the state changes are processed.

2

here => sweet-nightingale-7e2m3k - CodeSandbox

1 Like
3

Thanks deejay! I found the problem in my app root component, I was simply missing the outer wrapper: <div id="app"> ... </div>

Btw, I save your example as quick boiler plate template, cool! :slight_smile: I had base templates like this for F7 v5, but wanted to use the last F7 version for a new project.

One minor thing, in my setup, the active tab indicator is missing (tab-link-highlight element). If you switch to another tab it appears and works as expected.

4

fix for tab-link-highlight
here => quiet-wind-bgb156 - CodeSandbox

1 Like
5

:ok_hand: Thanks, was just writing the same line :joy: In your first sandbox, you don’t have this line and the highlight element is still there. Is that just a coincidence by the way the views are setup? So that the order of rendering is correct so F7 automatically “knows” what the active tab is?

6

no
‘coincidence’ not exist.

i edit the prev sandbox
they are the same

7

better => lingering-cloud-lhi4zz - CodeSandbox

1 Like
8

:ok_hand: Perfect! Is there some component event which is triggered when store.init is set to false and the page in view-welcome is unloaded? I was checking page:beforeremove, but this doesn’t seem to be triggered.

Maybe I’m thinking the ‘wrong way’? I want to gracefully unload/cleanup custom things in page components when a view is removed from DOM like this.

9

no.
we do it manually
i added ‘clear’ method => holy-frost-be45bi - CodeSandbox

the method trigger onUnmounted on view:beforedestroy