Enyo 中 create 和 rendered 函数的场景差异
Scenario difference between create and rendered function in Enyo
我在解决问题时遇到了这种情况。考虑以下场景,提供了一个 jsfiddle link:
http://jsfiddle.net/fp5Lt7zx/1/
enyo.kind({
name:'base',
components:[
{name:'button', kind:'moon.Button'}
],
create: function(){
this.inherited(arguments);
this.$.button.createComponent({
name:'tag',
classes:'list-recording-tag',
components: [{
content: "NEW",
classes: "list-recording-tag-font"
}]
});
}
});
new base().renderInto(document.body);
这很好用,但是当我没有编写 create 中给出的功能,而是尝试在 rendered 函数中提供它时,问题就来了。以下是具有相同功能的渲染函数的 link。
使用渲染函数,动态创建的 'tag' 组件不会渲染。所以为了强制渲染,我不得不添加这行代码
this.$.button.$.tag.render(); //this way is not recommended though
为什么需要在 rendered 函数中强制渲染标签组件,而不是在 create 函数中。除此之外,它们之间还有哪些差异需要考虑?
如果您向已呈现的控件添加控件(就像将其放入呈现的函数时所做的那样),您必须强制浏览器重绘,因此需要在新控件上调用 .render() .如果将其保留在创建过程中,则在呈现其包含控件之前构建组件,因此当它存在时就会存在。
我在解决问题时遇到了这种情况。考虑以下场景,提供了一个 jsfiddle link:
http://jsfiddle.net/fp5Lt7zx/1/
enyo.kind({
name:'base',
components:[
{name:'button', kind:'moon.Button'}
],
create: function(){
this.inherited(arguments);
this.$.button.createComponent({
name:'tag',
classes:'list-recording-tag',
components: [{
content: "NEW",
classes: "list-recording-tag-font"
}]
});
}
});
new base().renderInto(document.body);
这很好用,但是当我没有编写 create 中给出的功能,而是尝试在 rendered 函数中提供它时,问题就来了。以下是具有相同功能的渲染函数的 link。
使用渲染函数,动态创建的 'tag' 组件不会渲染。所以为了强制渲染,我不得不添加这行代码
this.$.button.$.tag.render(); //this way is not recommended though
为什么需要在 rendered 函数中强制渲染标签组件,而不是在 create 函数中。除此之外,它们之间还有哪些差异需要考虑?
如果您向已呈现的控件添加控件(就像将其放入呈现的函数时所做的那样),您必须强制浏览器重绘,因此需要在新控件上调用 .render() .如果将其保留在创建过程中,则在呈现其包含控件之前构建组件,因此当它存在时就会存在。