router componentUrl popup created duplicate DOM popups

[MiguelQueiroz]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Framework7 Version: 2.0.10

What you did

OK, so in my route i have

    ...
        {
            path: '/event/',
            popup: {
              componentUrl: './components/modal.html',
            },
          },
    ...

And then on my modal component page:

<template>
  <div class="popup">
    <div class="view">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="left">
              <a href="#" class="link popup-close">
                <i class="material-icons">clear</i>
              </a>
            </div>
            <div class="title">Title</div>
             
            <div>TEST</div>
         </div>
        </div>
        </div>
      </div>
  </div>
</template>
<style>
</style>
<script>
  return {};
</script>

Then i have a link in a panel on the main index page:

<p><a href="/event/" > event </a></p>

Expected Behavior

Create only 1 DOM popup.

Actual Behavior

After clicking the link it opens the modal using the router componentUrl. Which is fine, but after closing the modal, and clicking again, on the link, i notice it creates 2 DOM popups.

By the way, any chance that on close popup the DOM is not destroyed? i would like to preserve the DOM of that type of modal, in case i want to reopen the modal again and keep the "input" form filled. The DOM for that modal is updated by some methods, and i would like to be able to toggle etc $$(element).hide() some elements, and keep that state even if its closed. And i need to have those ids available in DOM:

[nolimits4web]

It is already fixed in dev version, fix will be in next update

[MiguelQueiroz]

And what about re using the same DOM element modal, after closing /open is that possible?

[nolimits4web]

No, by default it will create new one each time on creation. You can use the manual popup in the app root to reuse it

[MiguelQueiroz]

The problem with that is that some modals can be complex and use template tags. And i like to keep those special modals html separate to be easier to manage. Putting them on the index is not very nice.

I know some pages can be navigates using the router api and not reload the DOM which is great. It would be nice to sometime allow such behavious for router components too.

Have a nice day.

[nolimits4web]

You have an async route, where you can, for example, load such modal template via Ajax for first request and add it to app root and then resolve route with created el all the time