v0.8

Controller

class Controller extends Model → file: mvc/Controller.js

Controller defines what logic will be applied on the specific route. Every controller should be injected in the app with the App.routes() method.
The controller class is extended with other MVC classes: MyController → Controller → Model → View → Dd → DdCloners → DdListeners → Aux

Instance

The controller instance is created in App.routes() method when route is defined.

Properties

The controller instance properties (aggregated from other extended classes) are:
Property Description Type Default
$appName The application name. It defines the window property. For example if $appName='myApp' then window.myApp string dodoApp
$dd Related to Dd class: {__initFinished, elems, listeners, noncloner_directives, cloner_directives} object {...}
$debugOpts Debugger options. Set specific option to true if you want to see the debugging messages. See all options. object {...}
$elem The place where dd-elem element will be saved. object {}
$fridge Frozen constants defined by App.fridge() method. object {}
$model The container for model variables. When model variable is changed the render() is activated. object {}
$modeler Contains the model methods like: setValue, delvalue, getValue, mpush, mpop, munshift, mshift, mrender. See here. object {...}
__initFinished Determine if the __init() hook finished. It's used in Model to block rendering if the $model.somevar is defined in the __init(). boolean false

Methods

Lifecycle Hook Methods
There are 5 lifecycle hooks which controller will process synchronously: __loader(), __init(), __rend(), __postrend() and __destroy().
LOADER → INIT → REND → POSTREND → DESTROY



async __loader(trx) :void

A hook to load the HTML (views) and other resources (CSS, JS, ...) and set the web page properties like title, description, etc.
Use View methods here (loadView, loadJS, loadCSS, ...).
    ARGUMENTS:
  • trx :object - regoch router transitional variable (carrier) See Router.js
EXAMPLE:
Define meta title, description, keywords, language and load views for specific controller. 
import { Controller } from '@mikosoft/dodo';
import navbar from '/views/inc/navbar.html?raw';
import ctrl from '/views/pages/api-reference/controller.html?raw';
import footer from '/views/inc/footer.html?raw';


export default class APIReferenceAppCtrl extends Controller {

  constructor(app) {
    super();
  }

  async __loader(trx) {
    this.setTitle('DoDo API Reference: Controller');
    this.setDescription('Lightweight, easy to learn, Javascript, frontend framework for reactive apps');
    this.setKeywords('dodo, framework, javascript, js, single page app, spa, reactive');
    this.setLang('en');
    this.loadView('#navbar', navbar);
    this.loadView('#main', ctrl);
    this.loadView('#footer', footer);
  }
}

async __init(trx) :void

A hook to initialise the controller properties with the initial values. This is the right place for the API calls.
If model variable (for example: this.$model.products) is initialised here the render() will not be executed and view will not be updated. But the render() will be executed in next hook i.e. in the __rend().
    ARGUMENTS:
  • trx :object - regoch router transitional variable (carrier) See Router.js

async __rend(trx) :void

Render all elements with the "dd-..." attribute i.e. Dd, DdCloners and DdListeners.
If this method is omitted then default Controller.render() will be executed. Recommended not to use this method until you exactly know what you are doing.
    ARGUMENTS:
  • trx :object - regoch router transitional variable (carrier) See Router.js

async __postrend(trx) :void

It's a controller lifecycle hook which executes the controller code immediatelly after the __rend() method i.e. when the complete HTML is generated.
    ARGUMENTS:
  • trx :object - regoch router transitional variable (carrier) See Router.js

async __destroy() :void

The code in this method is executed when controller is destroyed, i.e. when one route is replaced with another.
    ARGUMENTS: No arguments.
EXAMPLE:
Unload CSS which was needed only in one route. 
async __loader() {
  this.loadCSS('temporary.css');
}

async __destroy() {
  this.unloadCSS('temporary.css');
}

Stackblitz Examples

  • Controller Lifecycle Hooks - shows in which order will be executed constructor(), __loader(), __init(), __postrend(), __destroy()