Dynamic event

Let's make the about page more interesting by adding some dynamic functionality with a classic click and increment function.

Create Your View

Start by creating a new template view file named templates/views/increment.js and define the view function as follows:

export function increment(data, container, helper, builder) {
    return `
    <article class="relative card-1 border-bottom ingress">
        <div class="wrapper md">
            <header class="mb">
                <h2 class="headline-2">${data.headline}</h2>
                <p>Has been incremented <strong>${data.increment}</strong> times!</p>
            </header>
            <a id="my-btn" class="button bg-primary sm" href="#">Increment +</a>
        </div>
    </article>
    `;
}

Modify About Controller Method

Add the import statement for the increment view in the Pages controller (src/controllers/Pages.js) at the top of the file:

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

export class Pages {
    // ...

Next, update the about method in the controller file (src/templates/Pages.js) to include the new view and a click function:

about(request, container, helper, builder) {
    const inst = this;

    inst.view(text, {
        headline: "About us",
        content: "Lorem ipsum dolor",
    });
    
    const incrementView = inst.view(increment, {
        headline: "Start increment",
        increment: 0
    });

    let inc = 1;
    // The done function will listen to view change
    inst.eventOnload(function() {
        const el = document.getElementById("my-btn");
        el.addEventListener("click", function(e) {
            e.preventDefault();
            incrementView.set({ headline: "Incremented", increment: inc });
            incrementView.update();
            inc++;
        });
    });

    return inst;
}

Visit your browser to see the results.

It's important to note that the done function is a Stratox function that listens to every view change. There's also an onload function available, which you could use instead of done, but it only triggers once after all the views have been loaded.

Next let's integrate the increment functionality directly into the view file templates/views/increment.js to create a reusable component, simplifying its usage and promoting modular design.

Modified Increment View

We'll move the done function to the increment view and make necessary adjustments for it to work within the view itself:

export function increment(data, container, helper, builder) {

    const inst = this;
    inst.eventOnload(function() {
        const el = document.getElementById("my-btn");
        el.addEventListener("click", function(e) {
            e.preventDefault();
            data.headline = "Incremented";
            data.increment += 1;
            inst.update();
        });
    });

    return `
	<article class="relative card-1 border-bottom ingress">
	    <div class="wrapper md">
	        <header class="mb">
	            <h2 class="headline-2">${data.headline}</h2>
	            <p>Has been incremented <strong>${data.increment}</strong> times!</p>
	        </header>
	        <a id="my-btn" class="button bg-primary sm" href="#">Increment +</a>
	    </div>
	</article>
	`;
}

Edited Controller

Now, let's go back to the Pages controller and make the final adjustment to the about function:

about(request, container, helper, builder) {
    
    this.view(text, {
        headline: "About us",
        content: "Lorem ipsum dolor",
    });
    
    this.view(increment, {
        headline: "Start increment",
        increment: 0
    });

    return this;
}

Visit your browser to see the results.

With these modifications, the code appears much cleaner and highly modular. You've now familiarized yourself with the Stratox architecture, and every example in this tutorial serves an essential purpose. You're free to utilize them as you see fit for your application.

Response Arguments

If you want to know more about the response arguments, then visit the Response Arguments page.

Template Views

Here are some important options to consider when loading and initializing views:

• Static Views: These are views that are bundled and loaded synchronously with the application. They are commonly used for static content that does not change frequently. Read more

• Asynchronous Views: Asynchronous views are loaded dynamically when needed, which can help improve performance by reducing initial load times. They are useful for content that may change frequently or is not required immediately upon application startup. Read more