Static views

The step-by-step guide has already covered the most common method for accessing static views. However, I'll reiterate and introduce some additional approaches.

Static views are the most commonly used views. What's excellent about static views is that they are bundled, minified, and then gzipped in the main JavaScript file before being served to the web browser. This optimization helps to keep load times down and ensures excellent performance.

Example 1

Begin by importing the view:

import { text } from "@/templates/views/text";

Once imported, you're ready to display the view:

const textView1 = this.view(text, {
    headline: "My text 1",
    content: "Lorem ipsum dolor"
});

This code imports the "text" view and displays it with the specified headline and content.

Loading the Same View Multiple Times

You can load the same view multiple times by providing unique names for each instance. Here's how you can do it:

const textView1 = this.view({ textView1: text }, {
    headline: "My text 1",
    content: "lorem ipsum dolor",
});

const textView2 = this.view({ textView2: text }, {
    headline: "My text 2",
    content: "lorem ipsum dolor",
});

By appending a unique identifier before the view function (e.g., textView1 and textView2), you can load the same view multiple times with different data. This approach allows you to reuse views efficiently throughout your application.

Example 2

In most cases, it's recommended to import the view, as it helps organize your code effectively. However, there are scenarios where you might only need to add a small HTML component without the need for separate files. In such cases, you can directly define the view within your code.

We'll demonstrate the "Loading the Same View Multiple Times" approach directly in this example. This method also allows you to name the view, enabling dynamic changes to the view data after loading.

this.view({
    textView1: function(data) {
        return `
        <header class="ingress mb">
            <h2 class="headline-3 title">${data.headline}</h2>
            <p>Lorem ipsum dolor sit amet.</p>
        </header>
        `;
    }
}, {
    headline: "My text 1",
});

this.view({
    textView2: function(data) {
        return `
        <header class="ingress mb">
            <h2 class="headline-3 title">${data.headline}</h2>
            <p>Lorem ipsum dolor sit amet.</p>
        </header>
        `;
    }
}, {
    headline: "My text 2",
});

In this example, we define the views directly within the code, specifying unique names for each view. The provided data is then dynamically rendered within the view components.