Auto размонтирования при удалении из DOM

Question

Рассмотрим следующий пример:

riot.mount('clock') 
 
setTimeout(()=>{ 
 
    console.log("removing from dom") 
 
    var el = document.getElementsByTagName("clock")[0]; 
 
    el.parentNode.removeChild(el); 
 
    riot.update(); 
 
}, 5000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot+compiler.min.js"> 
 
</script> 
 
<script type="riot/tag"> 
 
    <clock> 
 
     <p>{ time }</p> 
 
     
 
     this.time = new Date(); 
 
     tick() { 
 
     this.update({ time: new Date() }) 
 
     } 
 
     var timer = setInterval(this.tick, 1000) 
 
     this.on("unmount",() => { 
 
     \t console.log("unmounted") 
 
     clearInterval(timer) 
 
     }); 
 
     this.on("update",() => { 
 
     console.log("on update"); 
 
     }); 
 
     this.tick(); 
 
    </clock> 
 
</script> 
 

 
<clock></clock>

, где мы устанавливаем метку, а затем удалить его с помощью обычных методов DOM. В этом случае можно видеть, что, хотя тег больше не существует, он не был размонтирован, поэтому код удаления в обработчике событий unmount не запускается.

Я мог бы использовать DOM MutationObserver для обработки этого случая, но мне интересно, не хватает ли я чего-то.

Answer 1

Проверьте обновление parentNode и позвоните по телефону unmount, если он не существует.

riot.mount('clock') 
 
setTimeout(()=>{ 
 
    console.log("removing from dom") 
 
    var el = document.getElementsByTagName("clock")[0]; 
 
    el.parentNode.removeChild(el); 
 
    riot.update(); 
 
}, 5000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot+compiler.min.js"> 
 
</script> 
 
<script> 
 
    riot.mixin("autoUnmount", { 
 
    init: function() { 
 
     this.on("update",() => { 
 
     if (!this.root.parentNode) { 
 
      this.unmount(); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
</script> 
 
<script type="riot/tag"> 
 
    <clock> 
 
     <p>{ time }</p> 
 
     
 
     this.mixin("autoUnmount"); 
 
     this.time = new Date(); 
 
     tick() { 
 
     this.update({ time: new Date() }) 
 
     } 
 
     var timer = setInterval(this.tick, 1000) 
 
     this.on("unmount",() => { 
 
     \t console.log("unmounted") 
 
     clearInterval(timer) 
 
     }); 
 
     this.on("update",() => { 
 
     console.log("on update"); 
 
     }); 
 
     this.tick(); 
 
    </clock> 
 
</script> 
 

 
<clock></clock>