Controllers

Controllers are meant for implementing logic. They are automatically executed by the Router when their route is present in the current page URL. Here's a minimal example:

JavaScript

import {Controller}                 from 'arva-js/core/Controller. js';
import {TestView}                   from '../views/TestView. js';

export class DemoController extends Controller {
    Test(){
        return new TestView();
    }
}

The controller will be executed when the url path is set to index.html#NameOfController/<NameOfMethod>. In this example, it will be triggered when going to index.html#Demo/Test.

Passing parameters

GET parameters can be passed to the controller into the method like you would expect them to. Let's consider the url index.html#Demo/Test?param1=a&param2=b.

JavaScript

import {Controller}                 from 'arva-js/core/Controller. js';
import {TestView}                   from '../views/TestView. js';

export class DemoController extends Controller {
    Test(param1, param2){
        console.log(param1);   // "a"
        console.log(param2);   // "b"
        return new TestView();
    }
}

📘

To not have to hurt performance, parameters are passed to methods in the order they are present in the URL. For example, both #/Demo/ParamTest?id=1&name=Arva and #/Demo/ParamTest?some=1&thing=Arva will result in DemoController.ParamTest(id = 1, name = 'Arva') being called. This is because reflection in JavaScript is expensive performance-wise.

It's important that every controllers return a different view. If the same view is returned by multiple controller methods, the router won't be able to animate a transition between them, since the same view is already visible.

Useful to know

Controller methods can return Promises

If you have to wait for something like data before you can create your view inside your Controller method, you have the option to return a Promise object. When that promise is resolved with the view as a parameter, the view will be animated in as usual.

JavaScript

export class DemoController extends Controller {
    async Test(){
            /* --await something here-- */
            return new TestView();
    }
}