Dom 通往zurb的正确道路'；S基金会6毁灭和重新初始化烬 我试图在En烬App中销毁和重新初始化基础6组件。目前我做了以下这些。它在第一次单击时工作，之后不会触发重新初始化： // components/zf-reveal.js import Ember from 'ember'; export default Ember.Component.extend({ didInsertElement() { this._super(...arguments); Ember.Logger.log('open'); this.set('reveal', new Foundation.Reveal(this.$('.reveal'))); }, willDestroyElement() { this._super(...arguments); Ember.Logger.log('destroy'); this.get('reveal').destroy(); } }); // templates/components/zf-reveal.hbs <a data-open="modal">OPEN REVEAL</a> <div class="reveal" id="modal" data-reveal> <h1>Awesome. I Have It.</h1> <p class="lead">Your couch. It is mine.</p> <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> <button class="close-button" data-close aria-label="Close modal" type="button"> <span aria-hidden="true">&times;</span> </button> </div> //组件/zf-leaver.js 从“余烬”导入余烬； 导出默认的Ember.Component.extend({ didInsertElement（）{ 这个._super（…参数）； Ember.Logger.log（“打开”）； 这个集合（“显示”），新的基础。 }, 元素（）{ 这个._super（…参数）； Ember.Logger.log（'destroy'）； this.get（'reveal'）.destroy（）； } }); //模板/组件/zf-REVEL.hbs 开放式展示 令人惊叹的。我有。 您的沙发。它是我的

我是一个很酷的段落，生活在一个更酷的模式中。胜利

&时代；

---

这些代码片段在路由更改时确实会被破坏，但当我尝试在路由更改后再次单击它时，它不会再次出现，甚至不会发送错误消息。

据@kumkanillam所说，并稍微更改了一下，得到了这个结果，它就工作了

//components/zf-reveal.js
/* global Foundation */
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    this.set('reveal', new Foundation.Reveal(this.$('.reveal')));
  },
  willDestroyElement() {
    this._super(...arguments);
    this.get('reveal').destroy();
  },
  actions: {
    openModal(){
      this.get('reveal').open();
    }
  }
});

//templates/components/zf-reveal.hbs
<a onclick={{action 'openModal'}}>OPEN REVEAL</a>
<div class="reveal" id="modal" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

//组件/zf-leaver.js
*全球基金会/
从“余烬”导入余烬；
导出默认的Ember.Component.extend({
didInsertElement（）{
这个._super（…参数）；
这个集合（“显示”），新的基础。
},
元素（）{
这个._super（…参数）；
this.get（'reveal'）.destroy（）；
},
行动：{
openModal（）{
this.get（'reveal'）.open（）；
}
}
});
//模板/组件/zf-REVEL.hbs
开放式展示
令人惊叹的。我有。
您的沙发。它是我的
我是一个很酷的段落，生活在一个更酷的模式中。胜利

&时代；

您可以将其保存在最后一个

this.\u super（…参数）在
willDestroyElement
钩子中。只是提醒您，在组件的生命周期中，只会调用一次didInsertElement。@kumkanillam after
willDestroyElement
调用的整个组件都会从DOM中删除，对吗？是的。但我们仍然有两个钩子，在willDestroyElement之后，组件将在destroy上被调用。在这种情况下，可以再次重新初始化（didInsertElement）吗？就像didInsertElement又打电话了是吗？是的。你是对的。我们不应该手动调用生命周期挂钩。