Как тег скрипта ограничен для отдельных страниц в Svelte / Sapper?

Экземпляр импортированной библиотеки (ScrollMagic) в теге скрипта одной страницы в Sapper, экземпляр продолжает существовать при переходе на другие страницы.

Я попытался уничтожить его в ondestroy, но я не могу сослаться на переменную, ссылающуюся на экземпляр (созданный с помощью oncreate).

Как я могу ограничить тег скрипта отдельными страницами или уничтожить экземпляр при выходе со страницы?


172
1

Ответ:

Решено

У вас есть два способа доступа к вещам в ondestroy, которые были созданы в oncreate. Первый - добавить их как свойства компонента:

<script>
  import ScrollMagic from 'scrollmagic';

  export default {
    oncreate() {
      this.controller = new ScrollMagic.Controller(...);
      this.scene = new ScrollMagic.Scene(...);
    },

    ondestroy() {
      this.controller.destroy();
      this.scene.destroy();
    }
  };
</script>

Второй - использовать форму this.on("destroy", ...):

<script>
  import ScrollMagic from 'scrollmagic';

  export default {
    oncreate() {
      const controller = new ScrollMagic.Controller(...);
      const scene = new ScrollMagic.Scene(...);

      this.on('destroy', () => {
        controller.destroy();
        scene.destroy();
      });
    }
  };
</script>