maquette - 如何利用 Maquette.js 的外部库？

Question

问题:如何将 tether.js 等外部库与 Maquette.js 一起使用？

我的主要问题是，如果我在渲染函数中的某个地方初始化它我不知道在哪里可以将其拆除，随着时间的推移，随着元素重新渲染，会导致内存泄漏。 p>

我尝试使用 EnterAnimation 和 exitAnimation 作为生命周期 Hook ，但很快遇到了无法更改事件处理程序错误，因为我需要访问该项目独有的 Tether 特定实例。

想法？帮助？谢谢!

背景:

过去一周我非常喜欢开始使用 Maquette.js。我有一个相当大的 AngularJS v1 应用程序，它在很多地方都使用了工具提示。

阻碍我创建更多 Maquette.js 渲染 View 的主要因素是我对 Angular 工具提示指令的依赖。

所以，我开始玩 tether.js和 drop.js为了利用它们的下拉定位功能，这样我就不必重写它们。

Answer 1

最容易解决的问题是在 DOM 渲染后立即添加工具提示，maquette 提供了 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 实例。