如何使用带 Maquette.js 的外部库？

Question

问题：如何将 tether.js 之类的外部库与 Maquette.js 一起使用？

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

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

想法？帮助？谢谢！

背景：

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

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

所以，我开始使用 tether.js and 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 实例。

如何使用带 Maquette.js 的外部库？

How to utilize external libraries w/ Maquette.js?

maquette

问题：如何将 tether.js 之类的外部库与 Maquette.js 一起使用？

背景：