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) {constinst=this;inst.view(text, { headline:"About us", content:"Lorem ipsum dolor", });constincrementView=inst.view(increment, { headline:"Start increment", increment:0 });let inc =1;// The done function will listen to view changeinst.eventOnload(function() {constel=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:
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