How to manage sub-views - craftkit best practice

When you make complex user interface, your view has many sub-views under it. In such case, you can hold many sub-view's instance in your class directly.

But the best practice of managing sub-views is to set them into this.views.

This is the same practice as this.data management.

Craft.UI.View and its super-class Craft.Core.Component has many field by default. Those fields are designed to not conflict with user land usage. But sometimes it might be occurred.

To prevent field confliction, you are recommended to set your sub-views in this.views.

class Header extends Craft.UI.View {
    constructor(options){
        super(options);
        this.views = {};
    }
    viewDidLoad(callback){
        let title = new Title();
        this.appendSubView(title);
        this.views.title = title;

        let backbtn = new BackBtn();
        this.appendSubView(backbtn);
        this.views.backbtn = backbtn;

        if( callback ){ callback(); }
    }
    updateTitleText(text){
        this.views.title.setText(text);
    }
}

see also: craftkit best practice - How to hold instance data in your view

🛺 Try CraftKit Playground:
https://github.com/craftkit/craftkit-playground