A view is the presentational layer of an application: the visual interface that users see and interact with. In a web application, it is commonly expressed through HTML and CSS. A Web Component can keep this presentation in a separate Template import while controller logic handles behavior and the model holds data. section 14.4
Separate the view from the other MVC responsibilities:
- The view renders the interface. section 14.4
- The controller responds to UI changes such as clicks and input changes, then updates the model. section 14.4
- The model stores data and provides access to it, such as an exercise list or workout plan. section 14.4
A component view
An exercise-library component imports a Template, renders it into its shadow root, and displays exercise data. Its click listener delegates plan changes to the data model rather than embedding the data in the presentation. section 14.4
Listing 14.8. Exercise library component
import Template from './template.js';
export default class ExerciseLibrary extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = Template.render([
{ label: 'Jump Rope', type: 'cardio', thumb: '', time: 300, sets: 1},#1
... more exercises ... ]);
}
}
if (!customElements.get('wkout-exercise-lib')) {
customElements.define('wkout-exercise-lib', ExerciseLibrary);
}
Inspect the component structure that renders a Template inside a shadow root. section 14.4
