Search code examples
javascriptenyo

Scenario difference between create and rendered function in Enyo

I came across this situation while working around fix for a problem. Considering below scenario, provided with a 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);

This works fine, but the problem comes when instead of writing the functionality given in create, I try to give it in rendered function. Following is the link with rendered function having same functionality.

http://jsfiddle.net/esoyhrh7/

With rendered function, dynamically created 'tag' component wont render. So to render forcefully, I had to add this line of code

this.$.button.$.tag.render(); //this way is not recommended though

Why the need to render tag component forcefully in rendered function but not in create function. Apart from this what else are the differences one needs to consider between them?

Solution

  • If you add a control to an already rendered control (as you are doing when putting this in the rendered function) you have to force the browser to redraw, hence the needed call to .render() on the new control. If you leave it in create, the component is constructed before its containing control is rendered, and thus will be there when it is.