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

Question

问题：如何在Maquette.js中使用像tether.js这样的外部库？

我的主要问题是如果我在渲染函数的某处初始化它我不知道在哪里可以将其拆除，随着元素的重新渲染，导致内存泄漏。

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

思考？救命？谢谢！

背景

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

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

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

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实例。