Как использовать внешние библиотеки с Maquette.js?

Question

Вопрос: Как использовать внешнюю библиотеку, такую ​​как tether.js, с Maquette.js?

Моя главная проблема заключается в том, что если я инициализирую его где-то в своей функции рендеринга, я не знаю, где я мог бы его разорвать, что приводит к утечке памяти со временем, когда элементы перерисовываются.

Я экспериментировал с использованием enterAnimation и exitAnimation в качестве хуков жизненного цикла, но быстро столкнулся с ошибкой не может изменить обработчик событий, так как мне нужно получить доступ к конкретному экземпляру Tether, который уникален для этого элемента.

Мысли? Помогите? Спасибо!

Фон:

Мне очень понравилось начать использовать Maquette.js на прошлой неделе. У меня довольно большое приложение AngularJS v1, которое использует всплывающие подсказки во многих местах.

Главное, что удерживает меня от создания более представленных представлений Maquette.js, - это моя зависимость от директив Angular tooltip.

Итак, я начал играть с tether.js и drop.js, чтобы использовать их возможности позиционирования в раскрывающемся меню, чтобы мне не пришлось их переписывать.

Answer 1

Самое простое, что нужно решить - добавить всплывающую подсказку сразу после рендеринга DOM. Макет предоставляет afterCreate обратный вызов, чтобы сделать это (вы получите элемент в качестве первого аргумента).

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

Maquette позволяет контролировать жизненный цикл компонентов, поэтому хорошим примером будет следующее:

let createPage = () => {
  let tooltips = [];

  let initializeTooltip = (element) => {
    tooltips.push(createTooltip(element));
  }

  return {

    renderMaquette: () => {
      return h('div.page', [
        'some content', 
        h('div.with.tooltip', {afterCreate: initializeTooltip})
      ])
    },

    destroy: () => {
      tooltips.forEach((tooltip) => {tooltip.destroy()});
    }

  }
}

Когда вы используете этот шаблон, ваши компоненты должны распространять вызовы destroy() на подкомпоненты и в конечном итоге очищать используемые всплывающие подсказки.

Мы используем тот же шаблон для уничтожения экземпляров CKEditor.