用didRender渲染DOM(Rendered DOM with didRender)
优质
小牛编辑
126浏览
2023-12-01
调用didRender钩子以在呈现模板时对DOM进行更新。
语法 (Syntax)
import Ember from 'ember';
export default Ember.Component.extend({
...
didRender() {
//code here
},
...
})
例子 (Example)
下面给出的示例描述了使用didRender钩子来更新DOM。 创建一个名为post-action的组件,该组件将在app/components/下定义。
打开post-action.js文件并添加以下代码 -
import Ember from 'ember';
export default Ember.Component.extend ({
didInitAttrs(options) {
console.log('didInitAttrs', options);
},
didUpdateAttrs(options) {
console.log('didUpdateAttrs', options);
},
willUpdate(options) {
console.log('willUpdate', options);
},
didReceiveAttrs(options) {
console.log('didReceiveAttrs', options);
},
willRender() {
console.log('willRender');
},
didRender() {
console.log('didRender');
},
didInsertElement() {
console.log('didInsertElement');
},
didUpdate(options) {
console.log('didUpdate', options);
},
});
现在使用以下代码打开组件模板文件post-action.hbs -
<p>name: {{name}}</p>
<p>attrs.data.a: {{attrs.data.a}} is in console</p>
{{yield}}
打开index.hbs文件并添加以下代码 -
<div>
<p>appName: {{input type = "text" value = appName}}</p>
<p>Triggers: didUpdateAttrs, didReceiveAttrs, willUpdate, willRender,
didUpdate, didRender</p>
</div>
<div>
<p>data.a: {{input type = "text" value = data.a}}</p>
</div>
<hr>
{{post-action name = appName data = data}}
{{outlet}}
使用以下代码在app/controller/下创建index.js文件 -
import Ember from 'ember';
export default Ember.Controller.extend ({
appName:'xnip',
data: {
a: 'output',
}
});
输出 (Output)
运行ember服务器; 你会收到以下输出 -
打开控制台,您将获得输出,如下面的屏幕截图所示 -