2

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

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

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

想法？帮助？谢谢！

背景：

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

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

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

4

1 回答 1

2

最简单的解决方法是在渲染 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 实例。

于 2016-08-30T19:13:19.470 回答