DEV Community

Cover image for How to manage sub-views - craftkit best practice
CraftkitJS
CraftkitJS

Posted on • Edited on

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)