When reloading a page with an url, some elements are activated multiple times
With a simple page which have 2 nested views like following, if we go to page http://localhost:8001/messages/@https~@~_~_api~!alpha~!happy-dev~!fr~_users~_alex~_
, we can see this in the console:
// actual
activate circle-display
activate messages-display
activate circle-display
// expected
activate messages-display
activate circle-display
Code example:
<sib-router>
<sib-route name="circle" use-id>Circle</sib-route>
<sib-route name="messages" use-id>Messages</sib-route>
</sib-router>
<div id="circle">
<h1>CIRCLE</h1>
<sib-router default-route="circle-detail">
<sib-route name="circle-detail">Details</sib-route>
</sib-router>
<div id="circle-detail">
<sib-display id="circle-display" bind-resources fields="email"></sib-display>
</div>
</div>
<div id="messages">
<h2>MESSAGE</h2>
<sib-router default-route="messages-detail">
<sib-route name="messages-detail">Details</sib-route>
</sib-router>
<div id="messages-detail">
<h3>Détails messages</h3>
<sib-display id="messages-display" bind-resources fields="email"></sib-display>
</div>
</div>
<script>
document.getElementById('circle-display').addEventListener('populate', () => {
console.log("activate circle-display");
})
document.getElementById('messages-display').addEventListener('populate', () => {
console.log("activate messages-display");
})
</script>