The ViewBase class serves as a lightweight wrapper for an existing element, facilitating the creation of bindable content with a distinct binding context id on said element. Unlike a bindable element, it possesses a limited set of properties and methods due to its wrapper nature.

Although it’s a wrapper, it’s capable of loading its own HTML. Consider a scenario with a Single Page Application (SPA) layout, and the aim is to create diverse views. Each view holds its unique markup and content. Here, a lightweight wrapper like ViewBase comes in handy, offering binding features without replacing the main element. Instead, it allows for the alteration of the main element’s content as views are switched.

Creating a new view is straightforward—simply instantiate a class extending ViewBase, remove the previous view by invoking its disconnectedCallback, and introduce the new view by calling its connectedCallback.

Even though it’s not an element, ViewBase employs the same language, thereby standardizing life cycle events like connectedCallback and disconnectedCallback. The connectedCallback loads and parses the HTML with the view instance serving as the binding context, while the disconnectedCallback gets rid of the elements and tidies up their binding.

The minimal properties and methods on ViewBase contribute to its lightweight characteristic, making it an ideal choice for managing views in scenarios as described.

There are two distinct timing methods:

1. preLoad
2. load

These can be overridden in your instance to accommodate timing-sensitive operations.

The preLoad method is invoked prior to parsing, allowing for the loading of data necessary for one-time bindings within the asynchronous preLoad method.

On the other hand, the load method is triggered as the final step of initialization, post the loading of all components. It’s vital to recognize that within ViewBase, a load method already exists, hence your override should conclude by calling the base function. To avoid flicker or binding activities during UI change, the element of the view base is toggled to invisible at the onset of operations, and reverted to visible upon completion. Failing to call the base load method will result in your element remaining invisible.

export class IndexViewModel extends crs.classes.ViewBase {
    get mobi() {
        return import.meta.url.replace(".js", ".mobi.html");
    }

    constructor() {
        super();
        this.element = document.body;
    }

    async preLoad() {
        const menu = await fetch("/app/routes.json").then(result => result.json());
        this.setProperty("menu", menu.routes);
    }
}