This note refers to the implementation of the Model View Controller architecture in ALICE O2 Bookkeeping.

model.js defines the parent model. The parent model has variables for each sub model, for example when they are defined this.runs = new Runs(this); It has a method handleLocationChange which, on navigation, delegates tasks to the appropriate sub-model for the location change.

view.js defines the parent view. It has a parent content component, which determined the view to be rendered based on model.router.params.page. The view has a pages object which matches page names to page view objects. e.g. 'about-overview': AboutOverview. The parent content also passes the parent model to the view when it is rendered:

const content = (model, pages) => h(
	...
	switchCase(model.router.params.page, pages)(model),
	...
);