Emberjs 仅从组件代码中从 DOM 中销毁组件答案

【问题标题】：Emberjs destroying component from the DOM from component code onlyEmberjs 仅从组件代码中从 DOM 中销毁组件
【发布时间】：2017-08-29 05:43:02
【问题描述】：

我创建了一个 emberjs 组件，它有一个模板和一些 js 文件中的代码。我想从 DOM 中删除该组件，并且还想在某些条件下删除它的所有事件。我怎样才能做到这一点？或任何类似的方式来实现相同的目标？

//app/pods/custom-comp/component.js
import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement() {
       if(some_condition) { //if this condition is true then destory the component from DOM and remove all of its events.
          //destroy the component
       }
    }
});

【问题讨论】：

最简单的方法是在 {{if 块的情况下包装组件。
@locks 是的，使用{{if 块是一个选项。但它会增加模板中的代码。我想从组件本身中删除元素。
只有两行 :P 即使你设法从 JavaScript 端销毁了一个组件，它也会弄乱你的应用程序。
@locks 我的意思是我必须在不同的地方这样做。我有一个解决方案，但不确定它是否正确。 this.$().remove() 满足条件

标签： javascript ember.js components

【解决方案1】：

请参阅以下twiddle。我只是用过

this.$().remove();
this.destroy();

它似乎正在工作。然而;我建议用 {{if}} 块包装而不是这样做；就组件设计而言，这对我来说并不好；但我把它作为一个答案，因为它似乎在做你想做的事。添加this.destroy 至少会为您删除观察者，但didDestroyElement 钩子也会运行；但不是willDestroyElement。 destroy 见 official documentation。

【讨论】：

是的，你是对的。我只是想知道，它会解除事件和观察者的绑定吗？
@murli2308 我更新了旋转看是否还有观察者；是的，确实如此。该组件似乎已从 DOM 中删除，但它的观察者仍然有效；不知何故，Ember 仍然保持对我猜想的组件实例的引用。
@murli2308 即使像didDestroyElement 这样的生命周期钩子也不会被此方法触发。
如果我们在销毁组件之前从代码中调用方法会怎样，例如 this.willDestoryElement() 并删除该方法中的观察者
我更新了答案并添加了this.destroy()；这将为您删除观察者； didDestroyElement 将运行；但willDestroyElement 似乎没有触发。请再次检查旋转。