使用willDestroyElement分离和拆除(Detaching and Tearing Down with willDestroyElement)
优质
小牛编辑
127浏览
2023-12-01
您可以通过触发willDestroyElement挂钩从DOM中删除组件元素。
语法 (Syntax)
import Ember from 'ember';
export default Ember.Component.extend ({
...
willDestroyElement() {
//code here
},
...
})
例子 (Example)
下面给出的示例描述了使用willDestroyElement钩子,它从DOM中删除了组件元素。 使用名称索引创建一个控制器并从app/controller/打开文件以添加以下代码 -
import Ember from 'ember';
export default Ember.Controller.extend ({
showComponent: true,
laterCount: 0,
buttonText: Ember.computed('showComponent', function() {
let showing = Ember.get(this, 'showComponent');
if (showing) {
return 'Remove';
} else {
return 'Add';
}
}),
actions: {
toggleComponent() {
this.toggleProperty('showComponent');
},
updateLaterCount() {
Ember.set(this, 'laterCount', Ember.get(this, 'laterCount') + 1);
}
}
});
创建一个名为post-action的组件,该组件将在app/components/下定义。
打开post-action.js文件并添加以下代码 -
import Ember from 'ember';
export default Ember.Component.extend ({
runLater: null,
didInsertElement() {
let timeout = Ember.run.later(this, function() {
Ember.Logger.log('fired this after 1 seconds...');
this.sendAction();
}, 500);
Ember.set(this, 'runLater', timeout);
},
willDestroyElement() {
Ember.run.cancel(Ember.get(this, 'runLater'));
}
});
现在使用以下代码打开组件模板文件post-action.hbs -
<h2>xnip</h2>
打开index.hbs文件并添加以下代码 -
<h5>Count for clicks: {{laterCount}}</h5>
<button {{action 'toggleComponent'}}>{{buttonText}}</button>
{{#if showComponent}}
{{post-action action="updateLaterCount"}}
{{/if}}
{{outlet}}
输出 (Output)
运行ember服务器; 你会收到以下输出 -
最初的点击次数为1.当您单击“ Remove button ,它将删除文本 -
接下来,单击“ Add按钮,它将增加点击次数并显示文本 -