Increment / Events

Let's make the About page more interactive by adding a simple "click and increment" feature. Each click will update the displayed count, showing how many times the button has been clicked.

Create Your View

First, create a new view template file named templates/views/blocks/Increment.js. Define the view function as follows:

export default function Increment({ props, view }) {

  const clickEvent = view.bind((event) => {
    props.increment += 1;
  });
  
  return `
  <article class="relative card-1 border-bottom ingress">
    <div class="wrapper md">
      <header class="mb">
        <h2 class="headline-2">${props.increment > 0 ? "Incremented" : props.title}</h2>
        <p>Has been incremented <strong>${props.increment}</strong> times!</p>
      </header>
      <a class="button bg-primary sm my-btn" href="#2" onclick="${clickEvent}">Increment +</a>
    </div>
  </article>
  `;
}

Note: We created a new view in the directory blocks. Although the increment view can function like any other view, we intend to use it specifically as a block view. This means we will extend a view—specifically, the start view—with the increment.

Quick Breakdown

• Event Binding: We start by binding the click function to a constant named clickEvent, which will execute when the button is clicked.

• Triggering the Event: We call clickEvent in the button's onclick attribute, triggering the function whenever the button is clicked, updating the counter and headline dynamically.

Note: It will work exactly the same for onchange, oninput, and other DOM events.

Controller

Now that we have our increment block view, we need to render it in the start view:

import Increment from "@/templates/views/blocks/Increment";

export default function Start({ props, view }) {
  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${props.title}</h1>
        <p>${props.description}</p>
      </div>
    </article>
    <div class="increment">
      ${view.block(Increment, { title: "Start incrementing", increment: 0 })}
    </div>
  `;
}

Visit your browser to see the results!

Summary

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 Layouts

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